sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/PieChart/PieChart.style.js

@@ -1,154 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.TextAfterValue = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartContainer = exports.DoughnutChartAndLegendContainer = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const scrollableStyles = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-size: ${props => props.rootFont};
-  color: ${props => props.textColor};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  @media (max-width: 1536px) {
-    ${scrollableStyles}
-  }
-
-  > * {
-    box-sizing: border-box;
-  }
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: white;
-  border-radius: 12px;  
-`;
-const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div`
-  display: flex;
-  background: white;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
-  padding: 6px 10px;
-  margin: 0;
-`;
-const TooltipLabel = exports.TooltipLabel = _styledComponents.default.p`
-  color: #212121;
-  font-family: "Poppins", sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  font-style: normal;
-  width: max-content; // fit-content;
-  line-height: normal;
-  margin: 0;
-`;
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 20px;
-`;
-const Title = exports.Title = _styledComponents.default.h4`
-  font-weight: 400;
-  font-size: 18px;
-  margin: 0 0 8px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-`;
-const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const FormattedValue = exports.FormattedValue = _styledComponents.default.h5`
-  font-size: 40px;
-  font-weight: 500;
-  margin: 0;
-  line-height: 1;
-  @media (max-width: 1536px) {
-    font-size: 24px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 20px;
-  }
-`;
-const CurrencySign = exports.CurrencySign = _styledComponents.default.span`
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 0;
-`;
-const TextAfterValue = exports.TextAfterValue = _styledComponents.default.span`  
-  color: #999999;
-  font-size: 12px;
-  font-weight: 400;
-`;
-const DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div`
-  display: flex;
-  gap: 2%;
-  width: 86%;
-  min-height: 200px;
-  margin: auto;
-  padding: 0 20px;
-`;
-const DoughnutChartContainer = exports.DoughnutChartContainer = _styledComponents.default.div`
-  width: 50%;
-`;
-const LegendContainer = exports.LegendContainer = _styledComponents.default.div`
-  padding-left: 10px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 12px;
-`;
-const LegendControlsContainer = exports.LegendControlsContainer = _styledComponents.default.div`
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  margin-bottom: 0.375rem;
-`;
-const LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div`
-  flex-grow: 1;
-`;
-const LegendColorRectangle = exports.LegendColorRectangle = _styledComponents.default.div`
-  width: 16px;
-  height: 16px;
-  background: ${props => props.color};
-`;
-const LegendTitle = exports.LegendTitle = _styledComponents.default.h5`
-  font-weight: 400;
-  font-size: 14px;
-  margin: 0;
-  display: flex;
-  gap: 20px;
-  justify-content: space-between;
-`;
-const LegendFormattedValue = exports.LegendFormattedValue = _styledComponents.default.span`
-  font-weight: 500;
-  white-space: nowrap;
-`;

package/dist/components/PopupCharts/PopupCharts.js

@@ -1,212 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _TotalDoughnutChart = require("../TotalDoughnutChart/TotalDoughnutChart");
-var _BarChartsByWeeks = require("../BarChartsByWeeks/BarChartsByWeeks");
-var _TotalHorizontalCharts = require("../TotalHorizontalCharts/TotalHorizontalCharts");
-var _MarketShareDescription = require("../MarketShareDescription/MarketShareDescription");
-var _SalesAndROI = require("../SalesAndROI/SalesAndROI");
-var _CloseXIcon = require("../../icons/CloseXIcon");
-var _FoodLionNewIcon = require("../../icons/FoodLionNewIcon");
-var _TheGiantCompanyNewIcon = require("../../icons/TheGiantCompanyNewIcon");
-var _StopAndShopNewIcon = require("../../icons/StopAndShopNewIcon");
-var _GiantFoodIcon_new = require("../../icons/GiantFoodIcon_new");
-var _HannafordIcon_new = require("../../icons/HannafordIcon_new");
-var _PopupCharts = require("./PopupCharts.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; }
-const PopupCharts = props => {
-  const {
-    title,
-    chartType,
-    popupChartsItemsData,
-    isPopupChartsOpen,
-    width,
-    height,
-    subtitleTextColor,
-    onCloseClick
-  } = props;
-  const [IsPopupChartsOpen, setIsPopupChartsOpen] = (0, _react.useState)(isPopupChartsOpen);
-  const divRef = (0, _react.useRef)(null);
-  const [divHeight, setDivHeight] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    if (divRef.current) {
-      const {
-        top,
-        bottom
-      } = divRef.current.getBoundingClientRect();
-      const newHeight = bottom - top;
-      setDivHeight(newHeight);
-    }
-  }, [height]);
-  (0, _react.useEffect)(() => {
-    setIsPopupChartsOpen(isPopupChartsOpen);
-  }, [isPopupChartsOpen]);
-  const closePopupCharts = e => {
-    setIsPopupChartsOpen(false);
-    onCloseClick(e);
-  };
-  const displayRetailerIcon = retailer => {
-    switch (retailer) {
-      case 'Food Lion':
-        return <_FoodLionNewIcon.FoodLionNewIcon />;
-      case 'Hannaford':
-        return <_HannafordIcon_new.HannafordNewIcon />;
-      case 'Stop&Shop':
-        return <_StopAndShopNewIcon.StopAndShopNewIcon />;
-      case 'The Giant Company':
-        return <_TheGiantCompanyNewIcon.TheGiantCompanyIcon />;
-      case 'Giant Food':
-        return <_GiantFoodIcon_new.GiantFoodNewIcon />;
-      default:
-        return '';
-    }
-  };
-  const displayDoughnutChart = rowsData => <_TotalDoughnutChart.TotalDoughnutChart currencySign dotCut legendData={rowsData?.legendData} noDataText={rowsData.noDataText} title={rowsData.title} value={rowsData.value} height="270px" width="100%" itemsValuesSeparateLine={false} isPercent />;
-  const displayBarChartsByWeeks = (rowsData, showTwoBars) => <_BarChartsByWeeks.BarChartsByWeeks showTwoBars={showTwoBars} headerValueTopTitle={rowsData?.headerValueTopTitle} headerValue={rowsData?.headerValue} headerValueBottomTitle={rowsData?.headerValueBottomTitle} HeaderValueIsPercent={rowsData?.isPercentValue} legendData={rowsData?.legendData} showLegend={rowsData?.showLegend} barChartColor={rowsData?.barChartColor} barChartSecondColor={rowsData?.barChartSecondColor} barChartData={rowsData?.barChartData} endWeekRange={rowsData?.endWeekRange} startWeekRange={rowsData?.startWeekRange} title={rowsData?.title} tooltipTitle={rowsData?.tooltipTitle} tooltipSecondTitle={rowsData?.tooltipSecondTitle} height="240px" width="100%" xselectedColor={rowsData?.xselectedColor} isPercentValue={rowsData?.isPercentValue} />;
-  const displayTotalHorizontalCharts = rowsData => <_TotalHorizontalCharts.TotalHorizontalCharts currencySign dotCut chartsData={rowsData?.chartsData} noDataText={rowsData.noDataText} title={rowsData.title} value={rowsData.value} showOutgoingBanner={false} height="240px" width="100%" />;
-  const displayMarketShareDescription = rowsData => {
-    const content = <_MarketShareDescription.MarketShareDescription marketShareData={rowsData?.marketShareData} height="240px" width="100%" iconColor={rowsData?.iconColor} // "#229E38"
-    />;
-    return content;
-  };
-  const displaySalesAndROI = rowsData => {
-    const content = <_SalesAndROI.SalesAndROI title={rowsData?.title} dotCut={rowsData?.dotCut} currencySign={rowsData?.currencySign} currencyType={rowsData?.currencyType} salesData={rowsData?.salesData} noDataText={rowsData?.noDataText} showBanner={false} showBorderShadow={false} height="280px" width="100%" />;
-    return content;
-  };
-  const displayChart = item => {
-    let content;
-    switch (chartType) {
-      case 'TotalDoughnutChart':
-        content = displayDoughnutChart(item.rowsData?.TotalDoughnutChartDetails);
-        break;
-      case 'TotalHorizontalCharts':
-        content = displayTotalHorizontalCharts(item.rowsData?.TotalHorizontalChartsDetails);
-        break;
-      case 'BarChartsByWeeks':
-        content = displayBarChartsByWeeks(item.rowsData?.BarChartsByWeeksDetails, false);
-        break;
-      case 'BarChartsByWeeksTwoBars':
-        content = displayBarChartsByWeeks(item.rowsData?.BarChartsByWeeksDetails, true);
-        break;
-      case 'MarketShareDescription':
-        content = displayMarketShareDescription(item.rowsData?.MarketShareDescriptionDetails);
-        break;
-      case 'SalesAndROI':
-        content = displaySalesAndROI(item.rowsData?.SalesAndROIDetails);
-        break;
-      default:
-        content = '';
-        break;
-    }
-    return <div>
-        {content}
-      </div>;
-  };
-  const displayChartItem = item => <_PopupCharts.ChartItemMainContainer id="ChartItemMainContainer">
-      <_PopupCharts.ChartItemContainer id="ChartItemContainer" style={{
-      cursor: 'pointer'
-    }}>
-        <_PopupCharts.ChartItemIconContainer id="ChartItemIconContainer">
-          {displayRetailerIcon(item.title)}
-        </_PopupCharts.ChartItemIconContainer>
-        <_PopupCharts.ChartItemTitle id="ChartItemTitle" subtitleTextColor={subtitleTextColor}>
-          {item.title}
-        </_PopupCharts.ChartItemTitle>
-      </_PopupCharts.ChartItemContainer>
-
-      <_PopupCharts.ChartContentContainer id="ChartContentContainer">
-        {displayChart(item)}
-      </_PopupCharts.ChartContentContainer>
-    </_PopupCharts.ChartItemMainContainer>;
-  return <_PopupCharts.MainContainer id="MainContainer">
-      {IsPopupChartsOpen && <_PopupCharts.ModalOverlay id="ModalOverlay" className="modal-overlay">
-          <_PopupCharts.ModalContent id="ModalContent" ref={divRef} className="modal-content" height={height} width={width} onClick={e => e.stopPropagation()}>
-            <_PopupCharts.TitleContainer>
-              <_PopupCharts.Title>{title}</_PopupCharts.Title>
-
-              <_PopupCharts.CloseXIconContainer onClick={e => closePopupCharts(e)}>
-                <_CloseXIcon.CloseXIcon />
-              </_PopupCharts.CloseXIconContainer>
-            </_PopupCharts.TitleContainer>
-
-            <_PopupCharts.ChartsContainer id="ChartsContainer" maxHeight={divHeight ? (divHeight - 110).toString().concat('', 'px') : null} height={popupChartsItemsData?.length < 4 ? '45%' : '100%'}>
-              {popupChartsItemsData.map(item => displayChartItem(item))}
-            </_PopupCharts.ChartsContainer>
-          </_PopupCharts.ModalContent>
-        </_PopupCharts.ModalOverlay>}
-    </_PopupCharts.MainContainer>;
-};
-var _default = exports.default = PopupCharts;
-PopupCharts.propTypes = {
-  title: _propTypes.default.string,
-  chartType: _propTypes.default.string,
-  // eslint-disable-next-line react/require-default-props
-  popupChartsItemsData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    chartType: _propTypes.default.string,
-    value: _propTypes.default.number,
-    legendData: _propTypes.default.arrayOf(_propTypes.default.shape({
-      color: _propTypes.default.string,
-      name: _propTypes.default.string,
-      value: _propTypes.default.number
-    })),
-    noDataText: _propTypes.default.string
-  })),
-  isPopupChartsOpen: _propTypes.default.bool,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  onCloseClick: _propTypes.default.func,
-  subtitleTextColor: _propTypes.default.string
-};
-PopupCharts.defaultProps = {
-  title: 'Switching Pattern',
-  chartType: 'TotalDoughnutChart',
-  isPopupChartsOpen: true,
-  popupChartsItemsData: [{
-    title: 'Item 1',
-    chartType: 'TotalDoughnutChart',
-    value: 100,
-    legendData: [{
-      color: '#FF0000',
-      name: 'Red',
-      value: 50
-    }, {
-      color: '#00FF00',
-      name: 'Green',
-      value: 30
-    }, {
-      color: '#0000FF',
-      name: 'Blue',
-      value: 20
-    }],
-    noDataText: 'No data available'
-  }, {
-    title: 'Item 2',
-    chartType: 'TotalHorizontalCharts',
-    value: 200,
-    chartsData: [{
-      label: 'Label 1',
-      value: 50
-    }, {
-      label: 'Label 2',
-      value: 100
-    }, {
-      label: 'Label 3',
-      value: 150
-    }],
-    noDataText: 'No data available'
-  }
-  // Add more items as needed
-  ],
-  width: '1700px',
-  height: '800px',
-  onCloseClick: () => {},
-  subtitleTextColor: '#7E7E7E'
-};