sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/stories/TotalBenchmarkArrows.stories.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LessAvarage = exports.GreaterAvarage = exports.DataWithNulls = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TotalBenchmarkArrows = require("./components/TotalBenchmarkArrows");
+const arrDetailsData = [{
+  title: 'Basket Change',
+  value: 16
+}, {
+  title: 'Visits Change',
+  value: -5
+}];
+const arrDetailsDataUp = [{
+  title: 'Basket Change',
+  value: 50
+}, {
+  title: 'Visits Change',
+  value: 30
+}];
+const arrDetailsDataWithNulls = [{
+  title: 'Basket (Units) Change',
+  value: null
+}, {
+  title: 'Basket ($) Change',
+  value: 30
+}, {
+  title: 'Visits Change',
+  value: 30
+}];
+var _default = exports.default = {
+  title: 'SAG BI/TotalBenchmarkArrows',
+  component: _TotalBenchmarkArrows.TotalBenchmarkArrows,
+  tags: ['autodocs'],
+  argTypes: {
+    dotCut: {
+      name: 'dotCut',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - format total value with dot cut'
+    },
+    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) '
+    },
+    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'
+    },
+    detailsTitle: {
+      name: 'detailsTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'title on top of the details'
+    },
+    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']
+      }
+    },
+    detailsData: {
+      description: 'array [] of objects: {title: string, value:number } to fill the details data. value can be negative '
+    },
+    noDataText: {
+      name: 'noDataText',
+      control: {
+        type: 'text'
+      },
+      description: 'text to display when no data found'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrows.TotalBenchmarkArrows, args);
+const LessAvarage = exports.LessAvarage = Template.bind({});
+LessAvarage.args = {
+  title: 'New Repeaters',
+  value: 21500,
+  benchmarkTotalValue: 60000,
+  benchmarkValue: 30000,
+  detailsTitle: 'Existing Repeaters',
+  detailsData: arrDetailsData,
+  dotCut: true,
+  width: '310px',
+  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 GreaterAvarage = exports.GreaterAvarage = Template.bind({});
+GreaterAvarage.args = {
+  title: 'New Repeaters',
+  value: 50500,
+  benchmarkTotalValue: 60000,
+  benchmarkValue: 30000,
+  detailsTitle: 'Existing Repeaters',
+  detailsData: arrDetailsDataUp,
+  dotCut: true,
+  width: '310px',
+  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 = {
+  title: 'New Repeaters',
+  value: 50500,
+  benchmarkTotalValue: 60000,
+  benchmarkValue: 30000,
+  detailsTitle: 'Existing Repeaters',
+  detailsData: arrDetailsDataWithNulls,
+  dotCut: true,
+  width: '310px',
+  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/TotalBenchmarkBarchart.stories.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Redeemers = exports.IncrementalSales = exports.DataWithNulls = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TotalBenchmarkBarchart = require("./components/TotalBenchmarkBarchart");
+const arrData = [{
+  title: 'Actual',
+  value: 175100,
+  color: '#066768'
+}, {
+  title: 'Base Line',
+  value: 100000,
+  color: '#90CE9C'
+}];
+const arrDataRedeemers = [{
+  title: 'New Redeemers',
+  value: 256200,
+  color: '#85A1D2'
+}, {
+  title: 'Existing Redeemers',
+  value: 700000,
+  color: '#9AE6FF'
+}];
+const arrDataWithnulls = [{
+  title: 'New Redeemers',
+  value: null,
+  color: '#85A1D2'
+}, {
+  title: 'Existing Redeemers',
+  value: 700000,
+  color: '#9AE6FF'
+}];
+var _default = exports.default = {
+  title: 'SAG BI/TotalBenchmarkBarchart',
+  component: _TotalBenchmarkBarchart.TotalBenchmarkBarchart,
+  tags: ['autodocs'],
+  argTypes: {
+    dotCut: {
+      name: 'dotCut',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - format total value with dot cut'
+    },
+    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) '
+    },
+    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'
+    },
+    currency: {
+      name: 'currency',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - show/hide currency before total value'
+    },
+    currencyType: {
+      name: 'currencyType',
+      options: ['USD', 'EUR', 'ILS', 'GBP', 'JPY'],
+      control: {
+        type: 'select'
+      }
+    },
+    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']
+      }
+    },
+    barChartData: {
+      description: 'array [] of objects: {title: string, value:number } to fill the details data. only 2 elements supported right now '
+    },
+    noDataText: {
+      name: 'noDataText',
+      control: {
+        type: 'text'
+      },
+      description: 'text to display when no data found'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.TotalBenchmarkBarchart, args);
+const IncrementalSales = exports.IncrementalSales = Template.bind({});
+IncrementalSales.args = {
+  title: 'Incremental Sales',
+  value: 75100,
+  benchmarkTotalValue: 100000,
+  benchmarkValue: 50000,
+  barChartData: arrData,
+  currency: true,
+  currencyType: 'USD',
+  dotCut: true,
+  width: '250px',
+  height: '280px',
+  textcolor: '#000',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display.'
+};
+const Redeemers = exports.Redeemers = Template.bind({});
+Redeemers.args = {
+  title: 'Redeemers',
+  value: 956200,
+  benchmarkTotalValue: 2000000,
+  benchmarkValue: 1000000,
+  barChartData: arrDataRedeemers,
+  currency: true,
+  currencyType: 'USD',
+  dotCut: true,
+  width: '300px',
+  height: '280px',
+  textcolor: '#000',
+  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 = {
+  title: 'Redeemers',
+  value: null,
+  benchmarkTotalValue: 2000000,
+  benchmarkValue: 1000000,
+  barChartData: arrDataWithnulls,
+  currency: true,
+  currencyType: 'USD',
+  dotCut: true,
+  width: '300px',
+  height: '280px',
+  textcolor: '#000',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.'
+};

package/dist/stories/TotalDoughnutChart.stories.js

@@ -0,0 +1,301 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TotalCost5rows = exports.TotalCost3rows = exports.TotalCost = exports.SwitchersPatternPercent = exports.HideTitleAndValue = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TotalDoughnutChart = require("./components/TotalDoughnutChart");
+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'
+}];
+const arrLegendDat5rows = [{
+  name: 'Food Lion',
+  value: null,
+  color: '#066768'
+}, {
+  name: 'Hannaford',
+  value: null,
+  color: '#82B3B4'
+}, {
+  name: 'The Giant Company',
+  value: undefined,
+  color: '#90CE9C'
+}
+// { name: 'Giant Food', value: 200.68474, color: '#5FCC70' },
+// { name: 'Stop&Shop', value: 250.9687458, color: '#229E38' },
+];
+const arrLegendPercent = [{
+  color: '#066768',
+  name: 'None Switcher',
+  value: 40.3
+}, {
+  color: '#82B3B4',
+  name: 'From Other Products',
+  value: 19.7
+}, {
+  color: '#90CE9C',
+  name: 'From Other Supplier Brand',
+  value: 25.31111
+}, {
+  color: '#5FCC70',
+  name: 'From other Suppliers',
+  value: 14.59999
+}];
+var _default = exports.default = {
+  title: 'SAG BI/TotalDoughnutChart',
+  component: _TotalDoughnutChart.TotalDoughnutChart,
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figspec',
+      accessToken: 'figd_vlq2HLcwzTQLvrhLrFWY_Be8CqbuyKcltE9oyHnR'
+    }
+  },
+  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 (total) '
+    },
+    addingBenchmark: {
+      name: 'Add Benchmark',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - Adding Benchmark'
+    },
+    dotCut: {
+      name: 'Dot Cut',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - format total value with dot cut'
+    },
+    currencySign: {
+      name: 'Currency',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - show/hide currency sign before total value'
+    },
+    currencyType: {
+      name: 'Currency Type',
+      options: ['USD', 'EUR', 'ILS', 'GBP', 'JPY'],
+      control: {
+        type: 'select'
+      }
+    },
+    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: 'Text Color',
+      description: 'Sets the text color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    legendData: {
+      name: 'Legend Data',
+      description: 'array [] of objects: {displayName: string, value:number} to fill the pie chart, Please NOTE: the name have to be uniq '
+    },
+    itemsPercentagesValueAside: {
+      default: false,
+      name: 'Show Percentages value aside',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - Show Percentages value aside the item value'
+    },
+    itemsBoldedValues: {
+      default: true,
+      name: 'Items bolded values',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - Make the value text bolded'
+    },
+    itemsValuesSeparateLine: {
+      default: false,
+      name: 'Items values in a new line',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - Locate the value to a new line'
+    },
+    noDataText: {
+      name: 'No Data text',
+      control: {
+        type: 'text'
+      },
+      description: 'text to display when no data found'
+    },
+    isPercent: {
+      default: false,
+      name: 'isPercent',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - isPercent'
+    },
+    hideTitleAndValue: {
+      default: false,
+      name: 'hideTitleAndValue',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - isPercent'
+    },
+    textAfterValue: {
+      name: 'textAfterValue',
+      control: {
+        type: 'text'
+      },
+      description: 'text After Value'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, args);
+const TotalCost = exports.TotalCost = Template.bind({});
+TotalCost.args = {
+  title: 'Total Cost',
+  value: 36500,
+  addingBenchmark: false,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  legendData: arrLegendData,
+  textcolor: '#212121',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there are no redemptions or redemption units to display.',
+  height: '100%',
+  width: '100%',
+  isPercent: false,
+  hideTitleAndValue: false,
+  textAfterValue: ''
+};
+TotalCost.parameters = {
+  design: {
+    url: 'https://www.figma.com/file/kZyP3iKy3nO6sz1Ji7Axul/Sagarmatha---Dashboard?type=design&node-id=5666-2429&mode=dev'
+  }
+};
+const TotalCost3rows = exports.TotalCost3rows = Template.bind({});
+TotalCost3rows.args = {
+  title: 'Total Cost',
+  value: 56500,
+  addingBenchmark: false,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  legendData: arrLegendDat3rows,
+  textcolor: '#212121',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
+  hideTitleAndValue: false,
+  itemsBoldedValues: false,
+  textAfterValue: ''
+};
+TotalCost3rows.parameters = {
+  design: {
+    url: 'https://www.figma.com/file/kZyP3iKy3nO6sz1Ji7Axul/Sagarmatha---Dashboard?type=design&node-id=5813-8191&mode=dev'
+  }
+};
+const TotalCost5rows = exports.TotalCost5rows = Template.bind({});
+TotalCost5rows.args = {
+  title: 'Total Cost',
+  value: 565.25487,
+  addingBenchmark: false,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  legendData: arrLegendDat5rows,
+  width: '360px',
+  height: '410px',
+  textcolor: '#212121',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
+  hideTitleAndValue: false,
+  textAfterValue: ''
+};
+const SwitchersPatternPercent = exports.SwitchersPatternPercent = Template.bind({});
+SwitchersPatternPercent.args = {
+  title: 'Switchers Pattern',
+  value: 565000,
+  addingBenchmark: false,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  legendData: arrLegendPercent,
+  width: '360px',
+  height: '410px',
+  textcolor: '#212121',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
+  isPercent: true,
+  itemsValuesSeparateLine: true,
+  hideTitleAndValue: false,
+  textAfterValue: '30% out of $400K actual sales'
+};
+const HideTitleAndValue = exports.HideTitleAndValue = Template.bind({});
+HideTitleAndValue.args = {
+  title: 'Switchers Pattern',
+  value: 565000,
+  addingBenchmark: false,
+  dotCut: true,
+  currencySign: true,
+  currencyType: 'USD',
+  legendData: arrLegendPercent,
+  width: '360px',
+  height: '210px',
+  textcolor: '#212121',
+  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
+  isPercent: true,
+  itemsValuesSeparateLine: true,
+  hideTitleAndValue: true,
+  textAfterValue: ''
+};
+TotalCost5rows.parameters = {
+  design: {
+    url: 'https://www.figma.com/file/kZyP3iKy3nO6sz1Ji7Axul/Sagarmatha---Dashboard?type=design&node-id=5740-22422&mode=dev'
+  }
+};