sag_components 2.0.0-beta40 → 2.0.0-beta41

package/dist/stories/BarChart.stories.js

@@ -1,306 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.currentCampaignStyleWithPercent = exports.currentCampaignStyle = exports.SalesDollars = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BarChart = require("./components/BarChart");
-const arrData = [{
-  title: 'Food Lion',
-  date: '15.01.24-31.01.24',
-  value: 542366
-}, {
-  title: 'Hannaford',
-  date: '15.01.24-31.01.24',
-  value: 699511
-}, {
-  title: 'The Giant Company',
-  date: '15.01.24-31.01.24',
-  value: 403092
-}, {
-  title: 'Giant Food',
-  date: '15.01.24-31.01.24',
-  value: -6184
-}, {
-  title: 'Stop&Shop',
-  date: '15.01.24-31.01.24',
-  value: 415317
-}];
-const arrDataCurrentCampaign = [{
-  title: 'Back to School 2023',
-  date: '',
-  value: 542366.4155445,
-  isCurrent: false
-}, {
-  title: 'Fall Friends & Thanksgiving 2023',
-  date: '',
-  value: 699511.5454,
-  isCurrent: false
-}, {
-  title: 'Mar 23',
-  date: '',
-  value: 403092,
-  isCurrent: false
-}, {
-  title: 'Apr 23',
-  date: '',
-  value: 600184.4545,
-  isCurrent: false
-}, {
-  title: 'May 23',
-  date: '',
-  value: 415317.55,
-  isCurrent: false
-}, {
-  title: 'Jun 23',
-  date: '',
-  value: 542366,
-  isCurrent: false
-}, {
-  title: 'Jul 23',
-  date: '',
-  value: 699511,
-  isCurrent: false
-}, {
-  title: 'Aug 23',
-  date: '',
-  value: 403092,
-  isCurrent: false
-}, {
-  title: 'Sep 23',
-  date: '',
-  value: 600184,
-  isCurrent: false
-}, {
-  title: 'Okt 23',
-  date: '',
-  value: 415317,
-  isCurrent: false
-}, {
-  title: 'Now 23',
-  date: '',
-  value: 403092,
-  isCurrent: false
-}, {
-  title: 'Dec 23',
-  date: '',
-  value: 600184,
-  isCurrent: false
-}, {
-  title: 'Fall Friends & Thanksgiving 2024',
-  date: '',
-  value: 415317,
-  isCurrent: true
-}];
-const arrDataIsPercent = [{
-  title: 'Food Lion',
-  date: '',
-  value: 23.356
-}, {
-  title: 'Hannaford',
-  date: '',
-  value: 19.254
-}, {
-  title: 'The Giant Company',
-  date: '',
-  value: 11.5477
-}, {
-  title: 'Giant Food',
-  date: '',
-  value: 9.54545
-}, {
-  title: 'Stop&Shop',
-  date: '',
-  value: 7.545877,
-  isCurrent: true
-}];
-var _default = exports.default = {
-  title: 'SAG BI/BarChart',
-  component: _BarChart.BarChart,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'title',
-      control: {
-        type: 'text'
-      },
-      description: 'title on top of the component'
-    },
-    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)'
-    },
-    barSize: {
-      name: 'barSize',
-      control: {
-        type: 'text'
-      },
-      description: 'barSize of the control (in number ex: 60)'
-    },
-    barFontSizeValue: {
-      name: 'Top Bar Font Size',
-      control: {
-        type: 'text'
-      },
-      description: 'Top bar value font size'
-    },
-    barChartColor: {
-      name: 'barChartColor',
-      description: 'Sets the area chart 1 color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    barChartData: {
-      description: 'array [] of objects: {title: string, value:number } to fill the area data. '
-    },
-    showDollarSign: {
-      name: 'showDollarSign',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show Dollar sign on top of bar'
-    },
-    isDollar: {
-      name: 'isDollar',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show values as Dollar'
-    },
-    showLegend: {
-      name: 'showLegend',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show bottom legend'
-    },
-    showReferenceLine: {
-      name: 'showReferenceLine',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show reference line'
-    },
-    referenceLinePoint: {
-      name: 'referenceLinePoint',
-      control: {
-        type: 'number'
-      },
-      description: 'reference line point'
-    },
-    referenceLineColor: {
-      name: 'referenceLineColor',
-      control: {
-        type: 'color'
-      },
-      description: 'reference line color'
-    },
-    referenceLineDashed: {
-      name: 'referenceLineDashed',
-      control: {
-        type: 'number'
-      },
-      description: 'reference line dashed'
-    },
-    showCurrentCampaignStyle: {
-      name: 'showCurrentCampaignStyle',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show Cartesian Grid'
-    },
-    isPercent: {
-      name: 'isPercent',
-      control: {
-        type: 'boolean'
-      },
-      description: 'is Percent - display "%" next to value. when checked, the Dollar sign will be hidden'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_BarChart.BarChart, args);
-const SalesDollars = exports.SalesDollars = Template.bind({});
-SalesDollars.args = {
-  title: 'Sales $',
-  barChartData: arrData,
-  barSize: 60,
-  barFontSizeValue: '12px',
-  width: '800px',
-  height: '500px',
-  barChartColor: '#1F7677',
-  yAxisCounter: 10,
-  isPercentValue: false,
-  showLegend: true,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }],
-  showReferenceLine: true,
-  referenceLinePoint: 0,
-  referenceLineColor: '#D0D0D0',
-  referenceLineDashed: '0'
-};
-const currentCampaignStyle = exports.currentCampaignStyle = Template.bind({});
-currentCampaignStyle.args = {
-  title: 'My current campaign performance in comparison to previous',
-  barChartData: arrDataCurrentCampaign,
-  barSize: 60,
-  barFontSizeValue: '12px',
-  width: '1568px',
-  height: '500px',
-  barChartColor: '#90CE9C',
-  yAxisCounter: 10,
-  isPercentValue: false,
-  showLegend: false,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }],
-  showReferenceLine: true,
-  referenceLinePoint: 0,
-  referenceLineColor: '#D0D0D0',
-  referenceLineDashed: '0',
-  currentBarColor: '#C7E7CD',
-  showCurrentCampaignStyle: true
-};
-const currentCampaignStyleWithPercent = exports.currentCampaignStyleWithPercent = Template.bind({});
-currentCampaignStyleWithPercent.args = {
-  title: 'Current Campaign Style With Percent',
-  barChartData: arrDataIsPercent,
-  barSize: 60,
-  barFontSizeValue: '12px',
-  width: '800px',
-  height: '500px',
-  barChartColor: '#90CE9C',
-  yAxisCounter: 10,
-  isPercentValue: false,
-  showLegend: false,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }],
-  showReferenceLine: true,
-  referenceLinePoint: 0,
-  referenceLineColor: '#D0D0D0',
-  referenceLineDashed: '0',
-  currentBarColor: '#C7E7CD',
-  showCurrentCampaignStyle: true,
-  isPercent: true
-};

package/dist/stories/BarChartTwoRows.stories.js

@@ -1,259 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SalesDollars = exports.OneColumnOnly = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BarChartTwoRows = require("./components/BarChartTwoRows");
-const arrData = [{
-  title: 'Food Lion',
-  date: '15.01.24-31.01.24',
-  value: 542366,
-  lowerValue: 542366,
-  highValue: 542366
-}, {
-  title: 'Hannaford',
-  date: '15.01.24-31.01.24',
-  value: 699511,
-  lowerValue: 699511,
-  highValue: 699511
-}, {
-  title: 'The Giant Company',
-  date: '15.01.24-31.01.24',
-  value: 403092,
-  lowerValue: 403092,
-  highValue: 403092
-}, {
-  title: 'Giant Food',
-  date: '15.01.24-31.01.24',
-  value: 396184,
-  lowerValue: 396184,
-  highValue: 396184
-}, {
-  title: 'Stop&Shop',
-  date: '15.01.24-31.01.24',
-  value: 415317,
-  lowerValue: 415317,
-  highValue: 415317
-}];
-const arrDataOneColumnOnly = [{
-  title: 'Food Lion',
-  date: '15.01.24-31.01.24',
-  value: 542366,
-  lowerValue: null,
-  highValue: 542366
-}, {
-  title: 'Hannaford',
-  date: '15.01.24-31.01.24',
-  value: 699511,
-  lowerValue: null,
-  highValue: 699511
-}, {
-  title: 'The Giant Company',
-  date: '15.01.24-31.01.24',
-  value: 403092,
-  lowerValue: null,
-  highValue: 403092
-}, {
-  title: 'Giant Food',
-  date: '15.01.24-31.01.24',
-  value: 396184,
-  lowerValue: null,
-  highValue: 396184
-}, {
-  title: 'Stop&Shop',
-  date: '15.01.24-31.01.24',
-  value: 415317,
-  lowerValue: null,
-  highValue: 415317
-}];
-var _default = exports.default = {
-  title: 'SAG BI/BarChartTwoRows',
-  component: _BarChartTwoRows.BarChartTwoRows,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'Title',
-      control: {
-        type: 'text'
-      },
-      description: 'Title displayed on top of the component'
-    },
-    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)'
-    },
-    barChartHeight: {
-      name: 'Bar Chart Height',
-      control: {
-        type: 'number'
-      },
-      description: 'Height of the bar chart (in px)'
-    },
-    barSize: {
-      name: 'Bar Size',
-      control: {
-        type: 'number'
-      },
-      description: 'Size of the bars (in number, e.g., 60)'
-    },
-    barChartData: {
-      name: 'Bar Chart Data',
-      description: 'Array of objects: {title: string, value: number} to fill the bar chart data.'
-    },
-    barChartColorFirst: {
-      name: 'First Bar Color',
-      description: 'Sets the color for the first bar chart',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    barChartColorSecond: {
-      name: 'Second Bar Color',
-      description: 'Sets the color for the second bar chart',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    showDollarSign: {
-      name: 'Show Dollar Sign',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Display a dollar sign on top of the bar'
-    },
-    isDollar: {
-      name: 'Display as Dollar',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show values as dollar amounts'
-    },
-    showReferenceLine: {
-      name: 'Show Reference Line',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Display a reference line on the chart'
-    },
-    referenceLinePoint: {
-      name: 'Reference Line Point',
-      control: {
-        type: 'number'
-      },
-      description: 'Value at which the reference line is drawn'
-    },
-    referenceLineColor: {
-      name: 'Reference Line Color',
-      control: {
-        type: 'color'
-      },
-      description: 'Color of the reference line'
-    },
-    referenceLineDashed: {
-      name: 'Reference Line Dashed',
-      control: {
-        type: 'number'
-      },
-      description: 'Dashed Gapes of the reference line'
-    },
-    lowerValueLabel: {
-      name: 'Lower Value Label',
-      control: {
-        type: 'text'
-      },
-      description: 'Label for the lower value'
-    },
-    highValueLabel: {
-      name: 'High Value Label',
-      control: {
-        type: 'text'
-      },
-      description: 'Label for the high value'
-    },
-    showLegend: {
-      name: 'Show Legend',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Display the legend at the bottom'
-    },
-    legendData: {
-      name: 'Legend Data',
-      description: 'Array of objects: {title: string, iconType: string, iconColor: string} to fill the legend data.'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.BarChartTwoRows, args);
-const SalesDollars = exports.SalesDollars = Template.bind({});
-SalesDollars.args = {
-  title: 'Cost',
-  width: '800px',
-  height: '500px',
-  barChartHeight: 250,
-  barSize: 60,
-  barChartData: arrData,
-  barChartColorFirst: '#90CE9C',
-  barChartColorSecond: '#1F7677',
-  showDollarSign: true,
-  isDollar: true,
-  showReferenceLine: true,
-  referenceLinePoint: 0,
-  referenceLineColor: '#212121',
-  referenceLineDashed: '5',
-  lowerValueLabel: 'Redemption Cost: ',
-  highValueLabel: 'Package Cost: ',
-  showLegend: true,
-  legendData: [{
-    title: 'Package Cost',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }, {
-    title: 'Redemption Cost',
-    iconType: 'Square',
-    iconColor: '#90CE9C'
-  }]
-};
-const OneColumnOnly = exports.OneColumnOnly = Template.bind({});
-OneColumnOnly.args = {
-  title: 'Cost',
-  width: '800px',
-  height: '500px',
-  barChartHeight: 250,
-  barSize: 60,
-  barChartData: arrDataOneColumnOnly,
-  barChartColorFirst: '#90CE9C',
-  barChartColorSecond: '#1F7677',
-  showDollarSign: true,
-  isDollar: true,
-  showReferenceLine: true,
-  referenceLinePoint: 0,
-  referenceLineColor: '#212121',
-  referenceLineDashed: '5',
-  lowerValueLabel: 'Redemption Cost: ',
-  highValueLabel: 'Package Cost: ',
-  showLegend: true,
-  legendData: [{
-    title: 'Package Cost',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }, {
-    title: 'Redemption Cost',
-    iconType: 'Square',
-    iconColor: '#90CE9C'
-  }]
-};

package/dist/stories/BarChartWithAreaChart.stories.js

@@ -1,134 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SalesGrowth = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BarChartWithAreaChart = require("./components/BarChartWithAreaChart");
-const arrData = [{
-  title: 'Food Lion',
-  date: '15.01.24-31.01.24',
-  value: 90,
-  avgValue: 55
-}, {
-  title: 'Hannaford',
-  date: '15.01.24-31.01.24',
-  value: 80,
-  avgValue: 32
-}, {
-  title: 'The Giant Company',
-  date: '15.01.24-31.01.24',
-  value: 114,
-  avgValue: 37
-}, {
-  title: 'Giant Food',
-  date: '15.01.24-31.01.24',
-  value: -42,
-  avgValue: 38
-}, {
-  title: 'Stop&Shop',
-  date: '15.01.24-31.01.24',
-  value: 200,
-  avgValue: 45
-}];
-var _default = exports.default = {
-  title: 'SAG BI/Bar Chart With Area Chart',
-  component: _BarChartWithAreaChart.BarChartWithAreaChart,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'Title',
-      control: {
-        type: 'text'
-      },
-      description: 'Title on top of the component'
-    },
-    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)'
-    },
-    barSize: {
-      name: 'Bar Size',
-      control: {
-        type: 'number'
-      },
-      description: 'Bar size of the control (in number ex: 60)'
-    },
-    barFontSizeValue: {
-      name: 'Top Bar Font Size',
-      control: {
-        type: 'text'
-      },
-      description: 'Top bar value font size'
-    },
-    barChartHeight: {
-      name: 'Bar Chart Height',
-      control: {
-        type: 'number'
-      },
-      description: 'height of the control (in px)'
-    },
-    barChartColor: {
-      name: 'Bar Chart Color',
-      description: 'Sets the area chart 1 color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    barChartData: {
-      description: 'Array [] of objects: {title: string, value:number } to fill the area data.'
-    },
-    showLegend: {
-      name: 'Show Legend',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show bottom legend'
-    },
-    signType: {
-      name: 'Sign Type',
-      options: ['dollar', 'percentage', 'unit'],
-      control: {
-        type: 'select'
-      },
-      description: 'Sign type of the control (in dollar, percentage, unit)'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_BarChartWithAreaChart.BarChartWithAreaChart, args);
-const SalesGrowth = exports.SalesGrowth = Template.bind({});
-SalesGrowth.args = {
-  title: 'Sales Growth',
-  barChartData: arrData,
-  width: '800px',
-  height: '400px',
-  barSize: 60,
-  barFontSizeValue: '18px',
-  barChartHeight: 200,
-  barChartColor: '#1F7677',
-  showLegend: true,
-  signType: 'percentage',
-  isAreaChartDisplayed: true,
-  legendData: [{
-    title: 'Sales Growth %',
-    iconType: 'Square',
-    iconColor: '#1F7677'
-  }, {
-    title: 'AVG. Sales',
-    iconType: 'LegendUnionIcon',
-    iconColor: '#1F7677'
-  }]
-};