sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/BarChartTwoRows.stories.js

@@ -0,0 +1,259 @@
+"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

@@ -0,0 +1,134 @@
+"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'
+  }]
+};