sag_components 2.0.0-beta29 → 2.0.0-beta290

package/dist/stories/components/SingleBarLineCharts.js

@@ -1,415 +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 = _ref => {
-  var _legendData$find, _legendData$find2, _legendData$filter$, _legendData$filter$2;
-  let {
-    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'
-  } = _ref;
-  // 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.propTypes = {
-//   className: PropTypes.string,
-//   width: PropTypes.string,
-//   height: PropTypes.string,
-//   title: PropTypes.string,
-//   data: PropTypes.arrayOf(
-//     PropTypes.shape({
-//       retailer: PropTypes.string,
-//       offerType: PropTypes.string,
-//       period: PropTypes.string,
-//       lineValue: PropTypes.number,
-//       barValue: PropTypes.number,
-//       secondBarValue: PropTypes.number,
-//     }),
-//   ),
-//   totalsData: PropTypes.arrayOf(
-//     PropTypes.shape({
-//       title: PropTypes.string,
-//       value: PropTypes.number,
-//       sign: PropTypes.string,
-//       extraInfo: PropTypes.arrayOf(
-//         PropTypes.shape({
-//           title: PropTypes.string,
-//           value: PropTypes.number,
-//         }),
-//       ),
-//     }),
-//   ),
-//   showLegend: PropTypes.bool,
-//   legendData: PropTypes.arrayOf(
-//     PropTypes.shape({
-//       iconColor: PropTypes.string,
-//       iconType: PropTypes.string,
-//       title: PropTypes.string,
-//     }),
-//   ),
-//   maxBarRange: PropTypes.number,
-//   showLineChart: PropTypes.bool,
-//   lineRange: PropTypes.number,
-//   lineFontSizeValue: PropTypes.string,
-//   barFontSizeValue: PropTypes.string,
-//   barSize: PropTypes.number,
-//   barChartHeight: PropTypes.number,
-//   lineChartHeight: PropTypes.number,
-//   isLineChartCurrency: PropTypes.bool,
-//   isLineChartBolded: PropTypes.bool,
-//   setLineChartTooltip: PropTypes.bool,
-//   isTopBarPercent: PropTypes.bool,
-//   showSecondBar: PropTypes.bool,
-//   showPeriod: PropTypes.bool,
-//   currencySign: PropTypes.string,
-//   currencySignLine: PropTypes.string,
-//   noDataText: PropTypes.string,
-// };
-// 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;
-`;