sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/components/SingleBarLineCharts.js

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

@@ -0,0 +1,101 @@
+"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;
+`;