sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/OneColumnContainer/OneColumnContainer.style.js

@@ -1,107 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = exports.ColumnTitle = exports.BannerContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledContainer = exports.StyledContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  overflow: ${props => props.overflow};
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  background-color: white;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-`;
-const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div`
-  position: relative;
-  /* align-items: flex-start; */
-  justify-content: center;
-  background-color: white;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  display: ${props => props.display};
-  grid-template-columns: ${props => props.gridTemplateColumns};
-  > * {
-    box-sizing: border-box;
-  }
-`;
-const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div`
-  background: white;
-  overflow: auto;
-  padding: 20px;
-  box-sizing: border-box;
-`;
-const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div`
-  font-weight: 600;
-  color: black;
-  margin: 0px 0px 10px 0px;
-  font-size: 18px;
-  line-height: 32px;
-`;
-const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div`
-  color: black;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
-`;
-const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span`
-  color: black;
-  display: inline-block;
-  font-size: 20px;
-  font-weight: 500;
-  padding: 20px 20px 0;
-`;
-const IconContainer = exports.IconContainer = _styledComponents.default.div`
-  width: 20px;
-  height: 20px;
-  top: 10px;
-  right: 10px;
-  position: absolute;
-`;
-const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  gap: 10px;
-`;
-const BannerContainer = exports.BannerContainer = _styledComponents.default.div`
-  position: absolute;
-  z-index: 99;
-  top: 18px;
-  right: ${props => props.right};
-  user-select: none;
-`;
-const OutBanner = exports.OutBanner = _styledComponents.default.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${props => props.textColor};
-  cursor: pointer;
-  @media (max-width: 1536px) {
-    font-size: 13px;
-  }
-  > svg {
-    width: 14px;
-    height: 14px;
-    @media (max-width: 1536px) {
-      width: 13px;
-      height: 13px;
-    }
-    @media (max-width: 1366px) {
-      width: 12px;
-      height: 12px;
-    }
-  }
-`;

package/dist/components/PerformanceAnalytics/PerformanceAnalytics.js

@@ -1,442 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PerformanceAnalytics = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _recharts = require("recharts");
-var _TspanTooltip = _interopRequireDefault(require("../TspanTooltip/TspanTooltip"));
-var _NoDataFoundMessage = require("../NoDataFoundMessage/NoDataFoundMessage");
-var _SegmentedButton = require("..//SegmentedButton/SegmentedButton");
-var _PerformanceAnalyticsTotals = require("../PerformanceAnalyticsTotals/PerformanceAnalyticsTotals");
-var _PerformanceAnalyticsLegend = require("../PerformanceAnalyticsLegend/PerformanceAnalyticsLegend");
-var _CommonFunctions = require("../../utils/CommonFunctions");
-var _PerformanceAnalytics = require("./PerformanceAnalytics.style");
-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 no-use-before-define */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable no-nested-ternary */
-/* eslint-disable camelcase */
-/* eslint-disable react/prop-types */
-/* eslint-disable no-shadow */
-/* eslint-disable no-unsafe-optional-chaining */
-/* eslint-disable react/no-unstable-nested-components */
-
-const INDIVIDUAL_PERFORMANCE_STR = 'Individual Performance';
-const PERCENT_INCREMENTAL_GROWTH_STR = '% Incremental Growth';
-const PERCENT_CONTRIBUTION_OF_TOTAL_STR = '% Contribution of Total';
-
-/* PerformanceAnalytics */
-const PerformanceAnalytics = props => {
-  const {
-    currencyType,
-    colorGraphROI,
-    colorBarchart1,
-    colorBarchart2,
-    textcolor,
-    width,
-    height,
-    lineChartHeight,
-    barChartHeight,
-    dotCut,
-    noDataText,
-    totalsData,
-    data,
-    legendData,
-    tooltipBarchartLabel_ROI,
-    tooltipBarchartLabel_IndividualPerformance1,
-    tooltipBarchartLabel_IndividualPerformance2,
-    tooltipBarchartLabel_IndividualPerformance3,
-    tooltipBarchartLabel_ContributionOfTotal1,
-    tooltipBarchartLabel_ContributionOfTotal2
-  } = props;
-  const [segmentedButtonsFilter, setSegmentedButtonsFilter] = (0, _react.useState)(INDIVIDUAL_PERFORMANCE_STR);
-  const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
-  const [tooltipCouponText, setTooltipCouponText] = (0, _react.useState)({
-    content: '',
-    clientX: 0,
-    clientY: 0
-  });
-  const displayTotalsData = () => <_PerformanceAnalyticsTotals.PerformanceAnalyticsTotals totalsData={totalsData} width={width} />;
-  const displaySegmentedButtons = () => <_PerformanceAnalytics.SegmentedButtonContainer id="SegmentedButtonContainer">
-      <_SegmentedButton.SegmentedButton id="SegmentedButton BaselineSTLY" options={[{
-      value: INDIVIDUAL_PERFORMANCE_STR
-    }, {
-      value: PERCENT_INCREMENTAL_GROWTH_STR
-    }, {
-      value: PERCENT_CONTRIBUTION_OF_TOTAL_STR
-    }]} backgroundcolor="#F2F2F2" controlradius={8} defaultIndex={0} fontSize={12} name="segmentedDollarsOrUnits" onClick={event => {
-      setSegmentedButtonsFilter(event.value);
-    }} segmentradius={8} selectedsegmentcolor="#ffffff" selectedtextcolor="#212121" unselectedtextcolor="#212121" width={490} heigth={14} />
-    </_PerformanceAnalytics.SegmentedButtonContainer>;
-  const CustomizedLabelROI = props => {
-    const {
-      x,
-      y,
-      stroke,
-      value
-    } = props;
-    return <text x={x} y={y} dy={-8} fill={stroke} fontSize={14} textAnchor="middle">
-        {value}
-      </text>;
-  };
-  const CustomTooltipROI = ({
-    active,
-    payload
-  }) => {
-    if (active && payload && payload.length > 0) {
-      return <_PerformanceAnalytics.TooltipContainer>
-          <_PerformanceAnalytics.TooltipTitle>{`${payload[0].payload?.retailer}`}</_PerformanceAnalytics.TooltipTitle>
-
-          <_PerformanceAnalytics.ToolTipLabelAndValueContainer>
-            <_PerformanceAnalytics.TooltipLabel>{tooltipBarchartLabel_ROI}</_PerformanceAnalytics.TooltipLabel>
-            <_PerformanceAnalytics.TooltipValue>
-              {`${(0, _CommonFunctions.getFormattedValue)(payload[0].value)}${(0, _CommonFunctions.getFormattedUnits)(payload[0].value)}`}
-            </_PerformanceAnalytics.TooltipValue>
-          </_PerformanceAnalytics.ToolTipLabelAndValueContainer>
-        </_PerformanceAnalytics.TooltipContainer>;
-    }
-    return null;
-  };
-  const CustomTooltipBarChart = ({
-    active,
-    payload
-  }) => {
-    if (active && payload && payload.length > 0) {
-      const totalCostValue = payload[0].payload?.packageCostValue + payload[0].payload?.redemptionCostValue;
-      const packageCostPercent = totalCostValue ? payload[0].payload?.packageCostValue / totalCostValue * 100 : 0;
-      const redemptionCostPercent = totalCostValue ? payload[0].payload?.redemptionCostValue / totalCostValue * 100 : 0;
-      switch (segmentedButtonsFilter) {
-        case INDIVIDUAL_PERFORMANCE_STR:
-          return <_PerformanceAnalytics.TooltipContainer id="TooltipContainer">
-              {/* <TooltipTitle>{`${payload[0].payload.retailer}`}</TooltipTitle> */}
-
-              <_PerformanceAnalytics.ToolTipBarchart1Container id="ToolTipBarchart1Container">
-                <_PerformanceAnalytics.LegendColorRectangle id="LegendColorRectangle" color={colorBarchart1} />
-
-                <_PerformanceAnalytics.ToolTipBarchart1LabelAndValueContainer id="ToolTipBarchart1LabelAndValueContainer">
-                  <_PerformanceAnalytics.ToolTipLabelAndValueContainer id="ToolTipLabelAndValueContainer">
-                    <_PerformanceAnalytics.TooltipLabel id="TooltipLabel">
-                      {tooltipBarchartLabel_IndividualPerformance1}
-                    </_PerformanceAnalytics.TooltipLabel>
-                    <_PerformanceAnalytics.TooltipValue id="TooltipValue">
-                      {`${(0, _CommonFunctions.getCurrencySign)(currencyType)}${(0, _CommonFunctions.getFormattedValue)(payload[0].payload.packageCostValue)}
-        ${(0, _CommonFunctions.getFormattedUnits)(payload[0].payload.packageCostValue)} (${packageCostPercent.toFixed(1)}%) `}
-                    </_PerformanceAnalytics.TooltipValue>
-                  </_PerformanceAnalytics.ToolTipLabelAndValueContainer>
-
-                  {redemptionCostPercent > 0 && <_PerformanceAnalytics.ToolTipLabelAndValueContainer id="ToolTipLabelAndValueContainer">
-                      <_PerformanceAnalytics.TooltipLabel id="TooltipLabel">
-                        {tooltipBarchartLabel_IndividualPerformance2}
-                      </_PerformanceAnalytics.TooltipLabel>
-                      <_PerformanceAnalytics.TooltipValue id="TooltipValue">
-                        {`${(0, _CommonFunctions.getCurrencySign)(currencyType)}
-                      ${(0, _CommonFunctions.getFormattedValue)(payload[0].payload.redemptionCostValue)}
-                      ${(0, _CommonFunctions.getFormattedUnits)(payload[0].payload.redemptionCostValue)} 
-                      (${redemptionCostPercent.toFixed(1)}%) `}
-                      </_PerformanceAnalytics.TooltipValue>
-                    </_PerformanceAnalytics.ToolTipLabelAndValueContainer>}
-                </_PerformanceAnalytics.ToolTipBarchart1LabelAndValueContainer>
-              </_PerformanceAnalytics.ToolTipBarchart1Container>
-
-              <_PerformanceAnalytics.ToolTipLabelAndValueContainer id="ToolTipLabelAndValueContainer">
-                <_PerformanceAnalytics.LegendColorRectangle id="LegendColorRectangle" color={colorBarchart2} />
-                <_PerformanceAnalytics.TooltipLabel id="TooltipLabel">
-                  {tooltipBarchartLabel_IndividualPerformance3}
-                </_PerformanceAnalytics.TooltipLabel>
-                <_PerformanceAnalytics.TooltipValue id="TooltipValue">
-                  {`${(0, _CommonFunctions.getCurrencySign)(currencyType)}${(0, _CommonFunctions.getFormattedValue)(payload[0].payload.incrementalSalesValue)}
-                  ${(0, _CommonFunctions.getFormattedUnits)(payload[0].payload.incrementalSalesValue)} `}
-                </_PerformanceAnalytics.TooltipValue>
-              </_PerformanceAnalytics.ToolTipLabelAndValueContainer>
-            </_PerformanceAnalytics.TooltipContainer>;
-        case PERCENT_INCREMENTAL_GROWTH_STR:
-          return <_PerformanceAnalytics.TooltipContainer id="TooltipContainer">
-              {/* <TooltipTitle>{`${payload[0].payload.retailer}`}</TooltipTitle> */}
-
-              <_PerformanceAnalytics.ToolTipLabelAndValueContainer id="ToolTipLabelAndValueContainer">
-                <_PerformanceAnalytics.LegendColorRectangle id="LegendColorRectangle" color={colorBarchart2} />
-                <_PerformanceAnalytics.TooltipLabel id="TooltipLabel">
-                  Incremental Growth Value:
-                </_PerformanceAnalytics.TooltipLabel>
-                <_PerformanceAnalytics.TooltipValue id="TooltipValue">
-                  {`${payload[0].payload.IncrementalGrowthValue?.toFixed(1)}% `}
-                </_PerformanceAnalytics.TooltipValue>
-              </_PerformanceAnalytics.ToolTipLabelAndValueContainer>
-            </_PerformanceAnalytics.TooltipContainer>;
-        case PERCENT_CONTRIBUTION_OF_TOTAL_STR:
-          return <_PerformanceAnalytics.TooltipContainer id="TooltipContainer">
-              <_PerformanceAnalytics.ToolTipBarchart1Container id="ToolTipBarchart1Container">
-                <_PerformanceAnalytics.LegendColorRectangle id="LegendColorRectangle" color={colorBarchart1} />
-
-                <_PerformanceAnalytics.ToolTipBarchart1LabelAndValueContainer id="ToolTipBarchart1LabelAndValueContainer">
-                  <_PerformanceAnalytics.ToolTipLabelAndValueContainer id="ToolTipLabelAndValueContainer">
-                    <_PerformanceAnalytics.TooltipLabel id="TooltipLabel">
-                      {tooltipBarchartLabel_ContributionOfTotal1}
-                    </_PerformanceAnalytics.TooltipLabel>
-                    <_PerformanceAnalytics.TooltipValue id="TooltipValue">
-                      {`${payload[0].payload.contributionTotalCostValue?.toFixed(1)}% `}
-                    </_PerformanceAnalytics.TooltipValue>
-                  </_PerformanceAnalytics.ToolTipLabelAndValueContainer>
-                </_PerformanceAnalytics.ToolTipBarchart1LabelAndValueContainer>
-              </_PerformanceAnalytics.ToolTipBarchart1Container>
-
-              <_PerformanceAnalytics.ToolTipLabelAndValueContainer id="ToolTipLabelAndValueContainer">
-                <_PerformanceAnalytics.LegendColorRectangle id="LegendColorRectangle" color={colorBarchart2} />
-                <_PerformanceAnalytics.TooltipLabel id="TooltipLabel">
-                  {tooltipBarchartLabel_ContributionOfTotal2}
-                </_PerformanceAnalytics.TooltipLabel>
-                <_PerformanceAnalytics.TooltipValue id="TooltipValue">
-                  {`${payload[0].payload.contributionIncrementalSalesValue?.toFixed(1)}% `}
-                </_PerformanceAnalytics.TooltipValue>
-              </_PerformanceAnalytics.ToolTipLabelAndValueContainer>
-            </_PerformanceAnalytics.TooltipContainer>;
-        default:
-          return null;
-      }
-    }
-    return null;
-  };
-  const displayLineChartROI = () => <_recharts.ResponsiveContainer id="ResponsiveContainer" height={lineChartHeight}>
-      {segmentedButtonsFilter !== PERCENT_CONTRIBUTION_OF_TOTAL_STR ? <_recharts.LineChart data={data} margin={{
-      top: 20,
-      right: 30,
-      left: 20,
-      bottom: 10
-    }}>
-          <_recharts.Tooltip content={<CustomTooltipROI />} />
-          <_recharts.Line type="monotone" dataKey="roiValue" fill={colorGraphROI} name="retailer" stroke={colorGraphROI}>
-            <_recharts.LabelList content={<CustomizedLabelROI />} />
-          </_recharts.Line>
-        </_recharts.LineChart> : <div />}
-    </_recharts.ResponsiveContainer>;
-  const CustomizedLabelBarchart = props => {
-    const {
-      x,
-      y,
-      width,
-      value,
-      payload
-    } = props;
-    const radius = 10;
-    const plusSign = value > 0 ? '+' : '';
-    return <g>
-        <text x={x + width / 2} y={y - radius} fill={textcolor} fontWeight={400} fontSize="16px" textAnchor="middle" dominantBaseline="middle">
-          {segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? currencyType ? `${(0, _CommonFunctions.getCurrencySign)(currencyType).toString()}
-                 ${dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value)}
-                 ${dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''} ` : '' : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? `${plusSign}${value}%` : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? `${value}%` : ''}
-        </text>
-      </g>;
-  };
-  function CustomizedTickBarChart(props) {
-    const {
-      x,
-      y,
-      stroke,
-      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) {
-        const {
-          offerType
-        } = retailerData[0];
-        return <g transform={`translate(${x},${y})`} onMouseEnter={() => handleMouseEnter(offerType)} onMouseLeave={handleMouseLeave}>
-            <text x={0} y={0} dy={16} fill="#212121">
-              <_PerformanceAnalytics.LabelBoldText textAnchor="middle" x="0" dy="50" fontSize={16} fontWeight={600}>
-                {/* {retailerData[0].retailer} */}
-                {payload.value}
-              </_PerformanceAnalytics.LabelBoldText>
-              {/* <tspan
-                x="0"
-                dy="30"
-                textAnchor="middle"
-                fontSize={14}
-                fontWeight={400}
-               >
-                {retailerData[0].offerType?.substring(0, 10)}
-               </tspan> */}
-              <_PerformanceAnalytics.LabelText textAnchor="middle" x="0" dy="30" fontSize={14} fontWeight={400}>
-                {retailerData[0].period}
-              </_PerformanceAnalytics.LabelText>
-            </text>
-          </g>;
-      }
-      return null;
-    }
-    return null;
-  }
-  const getDataKeyNameBar1 = () => segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? 'totalValue' : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? '' : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? 'contributionTotalCostValue' : '';
-  const getDataKeyNameBar2 = () => segmentedButtonsFilter === INDIVIDUAL_PERFORMANCE_STR ? 'incrementalSalesValue' : segmentedButtonsFilter === PERCENT_INCREMENTAL_GROWTH_STR ? 'IncrementalGrowthValue' : segmentedButtonsFilter === PERCENT_CONTRIBUTION_OF_TOTAL_STR ? 'contributionIncrementalSalesValue' : '';
-  const displayBarChart = () => {
-    if (data && data.length > 0) {
-      const formatedData = data.map(item => ({
-        ...item,
-        totalValue: item.packageCostValue + item.redemptionCostValue,
-        contributionTotalCostValue: item.contributionTotalCostValue
-      }));
-      return <_recharts.ResponsiveContainer id="ResponsiveContainer" height={barChartHeight} width={width}>
-          <_recharts.BarChart data={formatedData} maxBarSize={60} margin={{
-          top: 30,
-          right: 30,
-          left: 20,
-          bottom: 5
-        }}>
-            <_recharts.XAxis dataKey="retailer" tick={CustomizedTickBarChart} tickLine={false} height={120} stroke={isNegativeValueFound() === true ? '#D0D0D0' : '#000'} />
-            {showLegendTooltip && <_TspanTooltip.default id="Tooltip" content={tooltipCouponText.content} top={tooltipCouponText.clientY} left={tooltipCouponText.clientX} direction="top" />}
-            <_recharts.Tooltip cursor={{
-            fill: 'transparent'
-          }} content={CustomTooltipBarChart} />
-            <_recharts.ReferenceLine y={0} stroke="#D0D0D0" />
-            {segmentedButtonsFilter !== PERCENT_INCREMENTAL_GROWTH_STR ? <_recharts.Bar dataKey={getDataKeyNameBar1()} fill={colorBarchart1} minPointSize={5} radius={[5, 5, 0, 0]}>
-                <_recharts.LabelList dataKey={getDataKeyNameBar1()} content={CustomizedLabelBarchart} />
-              </_recharts.Bar> : ''}
-            <_recharts.Bar dataKey={getDataKeyNameBar2()} fill={colorBarchart2} minPointSize={10} radius={[5, 5, 0, 0]}>
-              <_recharts.LabelList dataKey={getDataKeyNameBar2()} content={CustomizedLabelBarchart} />
-            </_recharts.Bar>
-          </_recharts.BarChart>
-        </_recharts.ResponsiveContainer>;
-    }
-    return null;
-  };
-  const isNegativeValueFound = () => {
-    if (data && data.length > 0) {
-      const negativeData = data.filter(item => item.IncrementalGrowthValue < 0);
-      if (negativeData && negativeData.length > 0) return true;
-      return false;
-    }
-    return false;
-  };
-  const displayLegendData = () => {
-    switch (segmentedButtonsFilter) {
-      case INDIVIDUAL_PERFORMANCE_STR:
-        return <_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend legendData={legendData} />;
-      case PERCENT_INCREMENTAL_GROWTH_STR:
-        return <_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend legendData={[{
-          iconColor: colorBarchart2,
-          iconType: 'Square',
-          title: '% Incremental Growth'
-        }, {
-          iconColor: colorGraphROI,
-          iconType: 'LegendUnionIcon',
-          title: 'Incremental Sales ROI'
-        }]} />;
-      case PERCENT_CONTRIBUTION_OF_TOTAL_STR:
-        return <_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend legendData={[{
-          iconColor: colorBarchart1,
-          iconType: 'Square',
-          title: '% Contribution to the Total Cost'
-        }, {
-          iconColor: colorBarchart2,
-          iconType: 'Square',
-          title: '% Contribution to the Inc. Sales'
-        }]} />;
-      default:
-        return '';
-    }
-  };
-  return <_PerformanceAnalytics.ControlsContainer id="ControlsContainer" height={height} width={width} textcolor={textcolor}>
-      {totalsData?.length > 0 && data?.length > 0 ? <_PerformanceAnalytics.Controls id="Controls">
-          {/* {CustomTooltipBarChart({
-            active: "TEST",
-            payload: [
-              {
-                payload: {
-                  packageCostValue: 500,
-                  redemptionCostValue: 700,
-                  incrementalSalesValue: 900,
-                  IncrementalGrowthValue: 20.14,
-                  contributionTotalCostValue: 8,
-                  contributionIncrementalSalesValue: 30,
-                },
-              },
-            ],
-           })} */}
-
-          {displayTotalsData()}
-          {displaySegmentedButtons()}
-          {displayLineChartROI()}
-          {displayBarChart()}
-          {displayLegendData()}
-        </_PerformanceAnalytics.Controls> : <_NoDataFoundMessage.NoDataFoundMessage noDataText={noDataText} />}
-    </_PerformanceAnalytics.ControlsContainer>;
-};
-exports.PerformanceAnalytics = PerformanceAnalytics;
-var _default = exports.default = PerformanceAnalytics;
-PerformanceAnalytics.propTypes = {
-  totalsData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    value: _propTypes.default.number,
-    dotCut: _propTypes.default.bool,
-    currency: _propTypes.default.bool,
-    currencyType: _propTypes.default.string,
-    growthPercent: _propTypes.default.number,
-    showGrowthPercentSign: _propTypes.default.bool
-  })),
-  data: _propTypes.default.arrayOf(_propTypes.default.shape({
-    retailer: _propTypes.default.string,
-    offerType: _propTypes.default.string,
-    period: _propTypes.default.string,
-    roiValue: _propTypes.default.number
-  })),
-  legendData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    iconColor: _propTypes.default.string,
-    iconType: _propTypes.default.string,
-    title: _propTypes.default.string
-  })),
-  currencyType: _propTypes.default.string,
-  colorGraphROI: _propTypes.default.string,
-  colorBarchart1: _propTypes.default.string,
-  colorBarchart2: _propTypes.default.string,
-  textcolor: _propTypes.default.string,
-  width: _propTypes.default.number,
-  height: _propTypes.default.number,
-  barChartHeight: _propTypes.default.number,
-  dotCut: _propTypes.default.bool,
-  lineChartHeight: _propTypes.default.number,
-  noDataText: _propTypes.default.string,
-  tooltipBarchartLabel_ROI: _propTypes.default.string,
-  tooltipBarchartLabel_IndividualPerformance1: _propTypes.default.string,
-  tooltipBarchartLabel_IndividualPerformance2: _propTypes.default.string,
-  tooltipBarchartLabel_IndividualPerformance3: _propTypes.default.string,
-  tooltipBarchartLabel_ContributionOfTotal1: _propTypes.default.string,
-  tooltipBarchartLabel_ContributionOfTotal2: _propTypes.default.string
-};
-PerformanceAnalytics.defaultProps = {
-  totalsData: [],
-  data: [],
-  legendData: [],
-  currencyType: 'USD',
-  colorGraphROI: '#9CCB3B',
-  colorBarchart1: '#1F7677',
-  colorBarchart2: '#90CE9C',
-  textcolor: '#212121',
-  width: '',
-  height: 130,
-  barChartHeight: 130,
-  lineChartHeight: 50,
-  dotCut: true,
-  noDataText: '',
-  tooltipBarchartLabel_ROI: 'Incremental Sales ROI:',
-  tooltipBarchartLabel_IndividualPerformance1: 'Package Cost:',
-  tooltipBarchartLabel_IndividualPerformance2: 'Redemption Cost:',
-  tooltipBarchartLabel_IndividualPerformance3: 'Incremental Sales:',
-  tooltipBarchartLabel_ContributionOfTotal1: '% Contribution to the Total Cost:',
-  tooltipBarchartLabel_ContributionOfTotal2: '% Contribution to the Inc. Sales:'
-};