sag_components 1.0.1068 → 2.0.0-beta1

package/dist/stories/components/Select.style.js

@@ -1,104 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledInput = exports.SelectWrapper = exports.OptionsContainer = exports.OptionItem = exports.Label = exports.ErrorMessage = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-/* eslint-disable no-nested-ternary */
-
-const SelectWrapper = exports.SelectWrapper = _styledComponents.default.div`
-  position: relative;
-  width: ${props => props.width || '200px'};
-  margin: ${props => props.margin || '0 0 0 0'};
-`;
-const Label = exports.Label = _styledComponents.default.label`
-
-  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
-  font-weight: 400;
-  padding-inline-end: 5px;
-  padding-inline-start: 5px;
-  margin-right: 10px;
-  
-  color: ${props => props.error ? 'red' : props.disabled ? '#888' : props.labelFontColor};
-  background-color: white;
-  position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
-  left: 10px;
-  font-family: Poppins;
-  
-  transform: translateY(-50%);
-  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  &:focus {
-    border-radius: 12px 12px 0 0 ;
-  }
-`;
-const StyledInput = exports.StyledInput = _styledComponents.default.input`
-  width: 200px;
-  padding: 10px 10px 10px 15px;
-  font-family: "Poppins", sans-serif;
-  font-weight: 400;
-  font-size: ${props => props.fontSize};
-  border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor};
-  border-radius: ${props => props.radius};
-  font-family: Poppins;
-  outline: none;
-  box-sizing: border-box;
-  color: ${props => props.disabled ? '#888' : '#333'};
-   
-  &:hover {
-    border: 1px solid ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor || '#bdbdbd'};
-    border-color: ${props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2'};
-  }
-
-  &:focus {
-    border-radius: 12px 12px 0 0 ;
-    border-bottom: none;
-    border-color: ${props => props.disabled ? '#bdbdbd' : props.borderColorFoucs};
-  }
-
-`;
-const OptionsContainer = exports.OptionsContainer = _styledComponents.default.ul`
-  list-style: none;
-  font-weight: 400;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  z-index: 2;
-  width: 200px;
-  font-family: Poppins;
-  border-top: none;
-  border-radius: 0 0 12px 12px;
-  border: 1px solid ${props => props.borderColorFoucs};
-  background-color: #fff;
-  border-color: ${props => props.borderColorFoucs};
-  display: ${props => {
-  var _props$filteredoption;
-  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
-}};
-`;
-const OptionItem = exports.OptionItem = _styledComponents.default.li`  
-  padding: 10px 10px 10px 15px;
-  cursor: pointer;
-  color: rgba(33, 33, 33, 0.80);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  transition: background-color 0.3s;
-
-  &:hover {
-    background-color: #f0f0f0;
-  }
-`;
-const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div`
-  font-size: 12px;
-  color: red;
-  margin-top: 5px;
-`;

package/dist/stories/components/SingleBarLineCharts.js

@@ -1,334 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SingleBarLineCharts = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _recharts = require("recharts");
-var _NoDataFoundMessage = require("./NoDataFoundMessage");
-var _SingleBarLineCharts = require("./SingleBarLineCharts.style");
-var _CommonFunctions = require("./CommonFunctions");
-/* eslint-disable no-restricted-globals */
-/* eslint-disable no-unused-vars */
-/* eslint-disable react/no-unstable-nested-components */
-/* eslint-disable no-shadow */
-/* eslint-disable react/prop-types */
-
-const SingleBarLineCharts = props => {
-  var _legendData$find, _legendData$find2, _legendData$filter$, _legendData$filter$2;
-  const {
-    className,
-    width,
-    height,
-    title,
-    data,
-    totalsData,
-    showLegend,
-    legendData,
-    maxBarRange,
-    showLineChart,
-    lineRange,
-    lineFontSizeValue,
-    barFontSizeValue,
-    barSize,
-    barChartHeight,
-    lineChartHeight,
-    isLineChartCurrency,
-    isLineChartBolded,
-    setLineChartTooltip,
-    isTopBarPercent,
-    showSecondBar,
-    showPeriod,
-    currencySignLine,
-    currencySign,
-    noDataText
-  } = props;
-  const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
-  const [tooltipCouponText, setTooltipCouponText] = (0, _react.useState)({
-    content: '',
-    clientX: 0,
-    clientY: 0
-  });
-  const CustomTooltipLineChart = props => {
-    const {
-      active,
-      payload
-    } = props;
-    if (active && payload && payload.length > 0) {
-      const totalValue = data.reduce((sum, item) => sum + (item.lineValue || 0), 0);
-      const currentValue = payload[0].payload.lineValue;
-      const percentage = currentValue / totalValue * 100;
-      const filteredLegendData = legendData.filter(item => item.iconType === 'LegendUnionIcon');
-      const currentRetailer = payload[0].payload.retailer;
-      return /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.TooltipTitle, null, `${currentRetailer}`), /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.TooltipLabel, null, `${filteredLegendData[0].title}: ${percentage.toFixed(1)}%`));
-    }
-    return null;
-  };
-  const CustomTooltipBarChart = props => {
-    const {
-      active,
-      payload
-    } = props;
-    if (active && payload && payload.length > 0) {
-      const totalBarValue = data.reduce((sum, item) => sum + (Math.abs(item.barValue) || 0), 0);
-      const totalSecondBarValue = data.reduce((sum, item) => sum + (Math.abs(item.secondBarValue) || 0), 0);
-      const currentBarValue = payload[0].payload.barValue;
-      const currentSecondBarValue = payload[0].payload.secondBarValue;
-      const currentRetailer = payload[0].payload.retailer;
-      const percentageFirstBar = Number(Math.abs(currentBarValue) / totalBarValue * 100).toFixed(1);
-      const percentageSecondBar = Number(Math.abs(currentSecondBarValue) / totalSecondBarValue * 100).toFixed(1);
-      const filteredLegendData = legendData.filter(item => item.iconType === 'Square');
-      return /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.TooltipTitle, null, `${currentRetailer}`), !isNaN(percentageFirstBar) && /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.TooltipLabel, null, `${filteredLegendData[0].title}: ${percentageFirstBar}%`), showSecondBar && !isNaN(percentageSecondBar) && /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.TooltipLabel, null, `${filteredLegendData[1].title}: ${percentageSecondBar}%`));
-    }
-    return null;
-  };
-  const CustomizedLabelBarchart = props => {
-    const {
-      x,
-      y,
-      width,
-      value
-    } = props;
-    const radius = 10;
-    if (value === 0) {
-      return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("text", {
-        x: x + width / 2,
-        y: y - radius,
-        fontWeight: 400,
-        fontSize: barFontSizeValue,
-        textAnchor: "middle"
-      }, "0"));
-    }
-    if (value === null || value === undefined) {
-      return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("text", {
-        x: x + width / 2,
-        y: y - radius,
-        fontWeight: 400,
-        fontSize: barFontSizeValue,
-        textAnchor: "middle",
-        dominantBaseline: "middle"
-      }, "N/A"));
-    }
-    return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("text", {
-      x: x + width / 2,
-      y: y - radius,
-      fontWeight: 400,
-      fontSize: barFontSizeValue,
-      textAnchor: "middle",
-      dominantBaseline: "middle"
-    }, `${currencySign}${(0, _CommonFunctions.getFormattedValue)(value)}${(0, _CommonFunctions.getFormattedUnits)(value)}${isTopBarPercent ? '%' : ''}`));
-  };
-  const CustomizedTickBarChart = props => {
-    const {
-      x,
-      y,
-      payload
-    } = props;
-    const handleMouseEnter = content => {
-      setTooltipCouponText(prevState => ({
-        ...prevState,
-        content: content !== prevState.content ? content : prevState.content,
-        clientX: x,
-        clientY: y
-      }));
-      setShowLegendTooltip(true);
-    };
-    const handleMouseLeave = () => {
-      setShowLegendTooltip(false);
-    };
-    if (data && data.length > 0 && payload) {
-      const retailerData = data.filter(item => item.retailer === payload.value);
-      if (retailerData && retailerData.length > 0) {
-        return /*#__PURE__*/_react.default.createElement("g", {
-          transform: `translate(${x},${y})`
-          // onMouseEnter={() => handleMouseEnter(offerType)}
-          ,
-          onMouseLeave: handleMouseLeave
-        }, /*#__PURE__*/_react.default.createElement("text", {
-          x: 0,
-          y: 0,
-          dy: 16,
-          fill: "#212121"
-        }, /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.LabelBoldText, {
-          textAnchor: "middle",
-          x: "0",
-          dy: "30",
-          fontWeight: 600
-        }, retailerData[0].retailer)), showPeriod && /*#__PURE__*/_react.default.createElement("text", {
-          x: 0,
-          y: 0,
-          dy: 16,
-          fill: "#212121"
-        }, /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.LabelText, {
-          textAnchor: "middle",
-          x: "0",
-          dy: "50",
-          fontSize: 14,
-          fontWeight: 400
-        }, retailerData[0].period)));
-      }
-      return null;
-    }
-    return null;
-  };
-  const CustomizedLabelROI = props => {
-    const {
-      x,
-      y,
-      stroke,
-      value
-    } = props;
-    return /*#__PURE__*/_react.default.createElement("text", {
-      x: x,
-      y: y,
-      dy: -8,
-      fill: stroke,
-      fontWeight: isLineChartBolded ? 600 : 400,
-      fontSize: lineFontSizeValue,
-      textAnchor: "middle"
-    }, `${isLineChartCurrency ? currencySignLine : ''}${(0, _CommonFunctions.getFormattedValue)(value)}${(0, _CommonFunctions.getFormattedUnits)(value)}`);
-  };
-  const isNegativeValueFound = () => {
-    if (data && data.length > 0) {
-      const negativeData = data.filter(item => item.barValue < 0 || item.secondBarValue < 0);
-      if (negativeData && negativeData.length > 0) return true;
-      return false;
-    }
-    return false;
-  };
-  return /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.ControlsContainer, {
-    className: className,
-    width: width,
-    height: height
-  }, (data === null || data === void 0 ? void 0 : data.length) > 0 ? /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.Controls, {
-    className: "Controls"
-  }, title !== '' && /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.Title, null, title), totalsData.length > 0 && /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.LinnerDataBoxWrap, {
-    width: "40%",
-    height: "60px",
-    data: totalsData
-  }), showLineChart && /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
-    height: lineChartHeight
-  }, /*#__PURE__*/_react.default.createElement(_recharts.LineChart, {
-    data: data.map(item => {
-      var _item$lineValue;
-      return {
-        ...item,
-        lineValue: item.lineValue === 'N/A' ? 0 : (_item$lineValue = item.lineValue) !== null && _item$lineValue !== void 0 ? _item$lineValue : 0
-      };
-    }),
-    margin: {
-      top: 20,
-      right: 80,
-      left: 80,
-      bottom: 20
-    }
-  }, /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
-    type: "number",
-    width: 0,
-    display: "none",
-    domain: [dataMin => dataMin / lineRange, dataMax => dataMax * lineRange],
-    allowDataOverflow: true
-  }), /*#__PURE__*/_react.default.createElement(_recharts.Line, {
-    type: "monotone",
-    name: "lineValue",
-    dataKey: "lineValue",
-    fill: (_legendData$find = legendData.find(item => item.iconType === 'LegendUnionIcon')) === null || _legendData$find === void 0 ? void 0 : _legendData$find.iconColor,
-    stroke: (_legendData$find2 = legendData.find(item => item.iconType === 'LegendUnionIcon')) === null || _legendData$find2 === void 0 ? void 0 : _legendData$find2.iconColor
-  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
-    content: /*#__PURE__*/_react.default.createElement(CustomizedLabelROI, null)
-  })), setLineChartTooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
-    content: CustomTooltipLineChart
-  }))), /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.BarsGapper, {
-    margin: !showLineChart ? lineChartHeight : 'inherit'
-  }), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
-    height: barChartHeight
-  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
-    data: data,
-    maxBarSize: 60,
-    margin: {
-      top: 20,
-      right: 0,
-      left: 0,
-      bottom: 20
-    }
-  }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
-    dataKey: "retailer",
-    tick: CustomizedTickBarChart,
-    tickLine: false,
-    height: 80,
-    interval: 0,
-    axisLine: {
-      height: '1px',
-      stroke: '#D0D0D0'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
-    type: "number",
-    width: 0,
-    display: "none",
-    allowDataOverflow: true,
-    domain: ['auto', dataMax => {
-      if (String(dataMax) === '-Infinity') {
-        return 0;
-      }
-      return dataMax * maxBarRange;
-    }]
-  }), /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
-    y: 0,
-    stroke: "#D0D0D0"
-  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
-    content: CustomTooltipBarChart
-  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
-    dataKey: "barValue",
-    barSize: barSize !== null && barSize !== void 0 ? barSize : 60,
-    fill: (_legendData$filter$ = legendData.filter(item => item.iconType === 'Square')[0]) === null || _legendData$filter$ === void 0 ? void 0 : _legendData$filter$.iconColor,
-    radius: [4, 4, 0, 0]
-  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
-    fill: "#212121",
-    dataKey: "barValue",
-    content: CustomizedLabelBarchart
-  })), showSecondBar && /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
-    dataKey: "secondBarValue",
-    barSize: barSize !== null && barSize !== void 0 ? barSize : 60,
-    fill: (_legendData$filter$2 = legendData.filter(item => item.iconType === 'Square')[1]) === null || _legendData$filter$2 === void 0 ? void 0 : _legendData$filter$2.iconColor,
-    radius: [4, 4, 0, 0]
-  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
-    fill: "#212121",
-    dataKey: "secondBarValue",
-    content: CustomizedLabelBarchart
-  })))), showLegend && /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.LegendContainer, {
-    legendData: legendData
-  })) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
-    noDataText: noDataText
-  }));
-};
-exports.SingleBarLineCharts = SingleBarLineCharts;
-var _default = exports.default = SingleBarLineCharts;
-SingleBarLineCharts.defaultProps = {
-  className: '',
-  width: '100%',
-  height: '100%',
-  title: '',
-  data: [],
-  totalsData: [],
-  showLegend: true,
-  legendData: [],
-  maxBarRange: 1,
-  showLineChart: true,
-  lineRange: 1,
-  lineFontSizeValue: '0.6em',
-  barFontSizeValue: '0.6em',
-  barSize: 60,
-  barChartHeight: 250,
-  lineChartHeight: 50,
-  isLineChartCurrency: false,
-  isLineChartBolded: false,
-  setLineChartTooltip: false,
-  isTopBarPercent: true,
-  showSecondBar: true,
-  showPeriod: true,
-  currencySign: '€',
-  currencySignLine: '€',
-  noDataText: 'No data'
-};

package/dist/stories/components/SingleBarLineCharts.style.js

@@ -1,101 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.Title = exports.SegmentedButtonContainer = exports.LinnerDataBoxWrap = exports.LegendContainer = exports.LabelText = exports.LabelBoldText = exports.CustomTooltip = exports.ControlsContainer = exports.Controls = exports.BarsGapper = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _LinnerDataBox = require("./LinnerDataBox");
-var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  font-size: ${props => props.rootFont};
-  color: ${props => props.textColor};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  border-radius: 12px;
-  align-self: center;
-  &.NoData {
-    align-self: center;
-    display: flex;
-    align-items: center;
-    width: 50%;
-    margin: 10% auto 0;
-  }
-  > * {
-    box-sizing: border-box;
-  }
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  width: 100%;
-  height: 100%;
-  padding: 24px 40px;
-  background: white;
-  display: flex;
-  flex-direction: column;
-  @media (max-width: 1536px) {
-    padding: 12px 32px;
-  }
-`;
-const Title = exports.Title = _styledComponents.default.span`
-  color: #212121;
-  display: inline-block;
-  font-size: 18px;
-  font-weight: 400;
-  margin-bottom: 14px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const BarsGapper = exports.BarsGapper = _styledComponents.default.div`
-  margin-top: ${props => `${props.margin}px`};
-`;
-const LinnerDataBoxWrap = exports.LinnerDataBoxWrap = (0, _styledComponents.default)(_LinnerDataBox.LinnerDataBox)`
-    padding: 0 0 16px;
-    .vertival-line {
-        min-height: unset !important;
-    }
-`;
-const SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div`
-  display: flex;
-  padding: 10px 0 0 10px;
-`;
-const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan`
-  font-size: 0.7em;
-`;
-const LabelText = exports.LabelText = _styledComponents.default.tspan`
-  font-size: 0.6em;
-`;
-const CustomTooltip = exports.CustomTooltip = _styledComponents.default.text`
-  font-size: 0.6em;
-  border-radius: 5px;
-  padding: 8px;
-  background: white;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-`;
-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 LegendContainer = exports.LegendContainer = (0, _styledComponents.default)(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend)`
-    margin-top: auto;
-    padding-bottom: 16px;
-`;