sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/BarChartWithAreaChart/BarChartWithAreaChart.js

@@ -1,263 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BarChartWithAreaChart = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _recharts = require("recharts");
-var _FoodLionChartIcon = _interopRequireDefault(require("../../icons/FoodLionChartIcon"));
-var _GiantFoodChartIcon = _interopRequireDefault(require("../../icons/GiantFoodChartIcon"));
-var _TheGiantCompanyChartIcon = _interopRequireDefault(require("../../icons/TheGiantCompanyChartIcon"));
-var _StopAndShopChartIcon = _interopRequireDefault(require("../../icons/StopAndShopChartIcon"));
-var _HannafordChartIcon = _interopRequireDefault(require("../../icons/HannafordChartIcon"));
-var _CommonFunctions = require("../../utils/CommonFunctions");
-var _BarChartWithAreaChart = require("./BarChartWithAreaChart.style");
-var _PerformanceAnalyticsLegend = _interopRequireDefault(require("../PerformanceAnalyticsLegend/PerformanceAnalyticsLegend"));
-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; }
-/* eslint-disable consistent-return */
-/* eslint-disable default-case */
-/* eslint-disable react/prop-types */
-/* eslint-disable no-shadow */
-/* eslint-disable react/no-unstable-nested-components */
-/* eslint-disable no-nested-ternary */
-
-const ICON_TYPE_SQUARE = 'Square';
-const ICON_TYPE_LEGEND_UNION_ICON = 'LegendUnionIcon';
-const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
-const BarChartWithAreaChart = props => {
-  const {
-    className,
-    title,
-    barChartData,
-    barSize,
-    barFontSizeValue,
-    barChartHeight,
-    signType,
-    width,
-    height,
-    barChartColor,
-    showLegend,
-    isAreaChartDisplayed,
-    legendData,
-    maxRange
-  } = props;
-  const controlsContainerRef = (0, _react.useRef)();
-  const displayFormattedValue = (value, signType) => {
-    if (!value) return '';
-    switch (signType) {
-      case 'dollar':
-        return ''.concat('$', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
-      case 'percentage':
-        return ''.concat((0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value), '%');
-      case 'unit':
-        return ''.concat((0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
-    }
-  };
-  const displayRetailerIcon = (retailer, x, y) => {
-    switch (retailer) {
-      case 'Food Lion':
-        return <g transform={`translate(${x - 34},${y - 10})`}>
-            <_FoodLionChartIcon.default />
-          </g>;
-      case 'Hannaford':
-        return <g transform={`translate(${x - 34},${y - 10})`}>
-            <_HannafordChartIcon.default />
-          </g>;
-      case 'Stop&Shop':
-        return <g transform={`translate(${x - 34},${y - 10})`}>
-            <_StopAndShopChartIcon.default />
-          </g>;
-      case 'The Giant Company':
-        return <g transform={`translate(${x - 34},${y - 10})`}>
-            <_TheGiantCompanyChartIcon.default />
-          </g>;
-      case 'Giant Food':
-        return <g transform={`translate(${x - 34},${y - 10})`}>
-            <_GiantFoodChartIcon.default />
-          </g>;
-      default:
-        return '';
-    }
-  };
-  const CustomTooltip = props => {
-    const {
-      active,
-      payload,
-      label
-    } = props;
-    if (!active || !payload || payload?.length === 0) return null;
-    let currentTooltipValue = 0;
-    let currentTooltipAvgValue = 0;
-    const [first] = payload;
-    if (first.payload?.value) currentTooltipValue = first.payload?.value;
-    if (first.payload?.avgValue) currentTooltipAvgValue = first.payload?.avgValue;
-    return <_BarChartWithAreaChart.TooltipDiv>
-        <_BarChartWithAreaChart.TooltipTitle>{`${label}`}</_BarChartWithAreaChart.TooltipTitle>
-        <_BarChartWithAreaChart.TooltipLabel>
-          {`${title}: ${displayFormattedValue(currentTooltipValue, signType)}`}
-        </_BarChartWithAreaChart.TooltipLabel>
-        {isAreaChartDisplayed && <_BarChartWithAreaChart.TooltipLabel>
-            {`AVG. Sales: ${displayFormattedValue(currentTooltipAvgValue, signType)}`}
-          </_BarChartWithAreaChart.TooltipLabel>}
-
-      </_BarChartWithAreaChart.TooltipDiv>;
-  };
-  const CustomizedTickBarChart = props => {
-    const {
-      x,
-      y,
-      payload
-    } = props;
-    if (barChartData && barChartData.length > 0 && payload) {
-      const retailerData = barChartData.filter(item => item.title === payload.value);
-      if (retailerData && retailerData.length > 0) {
-        return <g>
-            {displayRetailerIcon(payload.value, x, y)}
-            <g transform={`translate(${x},${y})`}>
-              <text x={0} y={15} dy={16} fill="#212121">
-                <_BarChartWithAreaChart.LabelText textAnchor="middle" x="0" dy="30" fontSize={14} fontWeight={400}>
-                  {retailerData[0].date}
-                </_BarChartWithAreaChart.LabelText>
-              </text>
-            </g>
-          </g>;
-      }
-      return null;
-    }
-    return null;
-  };
-  const CustomizedLabel = props => {
-    const {
-      x,
-      y,
-      stroke,
-      value,
-      viewBox
-    } = props;
-    if (value === undefined || value === null) {
-      return <text x={x + 30} y={y} dy={-8} fill={stroke} fontSize="0.6em" textAnchor="middle">
-          N/A
-        </text>;
-    }
-    if (value === 0) {
-      return <text x={x + 30} y={y} dy={-8} fill={stroke} fontSize={barFontSizeValue} textAnchor="middle">
-          0
-        </text>;
-    }
-    if (value < 0) {
-      return <text x={x + 30} y={y + viewBox.height} dy={-8} fill={stroke} fontSize={barFontSizeValue} textAnchor="middle">
-          {displayFormattedValue(value, signType)}
-        </text>;
-    }
-    return <text x={x + 30} y={y} dy={-8} fill={stroke} fontSize={barFontSizeValue} textAnchor="middle">
-        {displayFormattedValue(value, signType)}
-      </text>;
-  };
-  return <_BarChartWithAreaChart.ControlsContainer className={className} height={height} width={width} ref={controlsContainerRef}>
-      <_BarChartWithAreaChart.Controls className="Controls">
-        <_BarChartWithAreaChart.Title>{title}</_BarChartWithAreaChart.Title>
-
-        <_recharts.ResponsiveContainer height={barChartHeight}>
-          <_recharts.ComposedChart data={barChartData}
-        // margin={{
-        //   top: 20,
-        //   right: 0,
-        //   bottom: -50,
-        //   left: 0,
-        // }}
-        >
-
-            <_recharts.YAxis type="number" width={0} display="none" domain={[0, dataMax => dataMax * maxRange]} allowDataOverflow />
-            <_recharts.XAxis dataKey="title" tick={CustomizedTickBarChart} tickLine={false} height={120} stroke="#D0D0D0" allowDataOverflow width={700} interval={0} />
-            {isAreaChartDisplayed && <>
-                <_recharts.Tooltip content={<CustomTooltip />} />
-                <_recharts.Tooltip />
-              </>}
-
-            <_recharts.Bar dataKey="value" fill={barChartColor} minPointSize={0} barSize={barSize ?? 60} radius={[5, 5, 0, 0]}>
-              <_recharts.LabelList dataKey="value" content={CustomizedLabel} />
-            </_recharts.Bar>
-            {isAreaChartDisplayed && <_recharts.Area dataKey="avgValue" stroke="#066768" fill="#0666685b" />}
-
-          </_recharts.ComposedChart>
-        </_recharts.ResponsiveContainer>
-
-        {showLegend && <_PerformanceAnalyticsLegend.default legendData={legendData} />}
-
-      </_BarChartWithAreaChart.Controls>
-    </_BarChartWithAreaChart.ControlsContainer>;
-};
-exports.BarChartWithAreaChart = BarChartWithAreaChart;
-var _default = exports.default = BarChartWithAreaChart;
-BarChartWithAreaChart.propTypes = {
-  title: _propTypes.default.string,
-  barChartData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    date: _propTypes.default.string,
-    value: _propTypes.default.number,
-    avgValue: _propTypes.default.number
-  })),
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  barSize: _propTypes.default.number,
-  barChartHeight: _propTypes.default.number,
-  barFontSizeValue: _propTypes.default.string,
-  barChartColor: _propTypes.default.string,
-  showLegend: _propTypes.default.bool,
-  signType: _propTypes.default.oneOf(['dollar', 'percentage', 'unit']),
-  isAreaChartDisplayed: _propTypes.default.bool,
-  legendData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string.isRequired,
-    iconType: _propTypes.default.oneOf([ICON_TYPE_SQUARE, ICON_TYPE_LEGEND_UNION_ICON, ICON_TYPE_LEGEND_LINE_ICON]).isRequired,
-    iconColor: _propTypes.default.string.isRequired
-  })),
-  maxRange: _propTypes.default.number
-};
-BarChartWithAreaChart.defaultProps = {
-  title: 'Title Chart',
-  barChartData: [{
-    title: 'Food Lion',
-    date: '15.01.24-31.01.24',
-    value: 70,
-    avgValue: 42
-  }, {
-    title: 'Hannaford',
-    date: '15.01.24-31.01.24',
-    value: 50,
-    avgValue: 34
-  }, {
-    title: 'The Giant Company',
-    date: '15.01.24-31.01.24',
-    value: 40,
-    avgValue: 35
-  }, {
-    title: 'Giant Food',
-    date: '15.01.24-31.01.24',
-    value: 80,
-    avgValue: 70
-  }, {
-    title: 'Stop&Shop',
-    date: '15.01.24-31.01.24',
-    value: 20,
-    avgValue: 80
-  }],
-  width: '100%',
-  height: '100%',
-  barSize: 60,
-  barChartHeight: 50,
-  barFontSizeValue: '14px',
-  barChartColor: '#BD9EFF',
-  showLegend: true,
-  signType: 'dollar',
-  isAreaChartDisplayed: true,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: ICON_TYPE_SQUARE,
-    iconColor: '#BD9EFF'
-  }],
-  maxRange: 2
-};

package/dist/components/BarChartWithAreaChart/BarChartWithAreaChart.stories.js

@@ -1,134 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SalesGrowth = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BarChartWithAreaChart = require("./BarChartWithAreaChart");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 => <_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'
-  }]
-};

package/dist/components/BarChartWithAreaChart/BarChartWithAreaChart.style.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.Title = exports.RetailerIconContainer = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  color: #212121;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  min-width: 250px;
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  background: white;
-  display: flex;
-  flex-direction: column;
-  height: ${props => props.height};
-  padding: 20px;
-  @media (max-width: 1536px) {
-    padding: 18px;
-  }
-`;
-const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div`
-  border-radius: 5px;
-  padding: 8px 12px;
-  background: white;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-  margin: 0;
-`;
-const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div`
-  color: #212121;
-  font-size: 14px;
-  font-weight: 400;
-  width: fit-content;
-`;
-const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div`
-  color: #212121;
-  font-size: 14px;
-  font-weight: 600;
-`;
-const Title = exports.Title = _styledComponents.default.h5`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 20px;
-  margin: 0 0 30px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-    margin: 0 0 20px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan`
-  font-size: 0.7em;
-`;
-const LabelText = exports.LabelText = _styledComponents.default.tspan`
-  font-size: 0.6em;
-`;
-const RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-`;