sag_components 2.0.0-beta28 → 2.0.0-beta280

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

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipTextContainer = exports.TooltipText = exports.PeriodPickerEmptyText = exports.PeriodPickerEmptyContainer = exports.PeriodPickerContainer = exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  font-family: "Poppins", sans-serif;
-  font-weight: 500;
-  font-size: 14px;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  padding: 40px 30px 20px;
-  background-color: #fefefe;
-  border-radius: 10px;
-  box-shadow: ${props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : ''};
-  box-sizing: border-box;
-`;
-const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div`
-  display: flex;  
-  gap: 10px;
-  flex-direction: row-reverse; 
-`;
-const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  width: 100%;
-`;
-const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  white-space: wrap;
-  gap: 20px;
-  width: 100%;
-`;
-const FieldContainer = exports.FieldContainer = _styledComponents.default.div` 
-  margin: 0;
-`;
-const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div`
-  margin: 0;
-`;
-const PeriodPickerContainer = exports.PeriodPickerContainer = _styledComponents.default.div` 
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-const PeriodPickerEmptyContainer = exports.PeriodPickerEmptyContainer = _styledComponents.default.div` 
-  display: flex;  
-  align-content: center;
-  justify-content: flex-start;
-  align-items: center;  
-  margin-bottom: 10px;
-  border-radius: 10px; 
-  border: 1px solid #E7E7E7;
-  width: ${props => props.width};
-  height: ${props => props.height};     
-  &:hover {
-    cursor: pointer;
-  } 
-`;
-const PeriodPickerEmptyText = exports.PeriodPickerEmptyText = _styledComponents.default.div`
-  margin: 0 20px;
-  font-family: "Poppins", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  color: #8B8989;
-  user-select: none;    
-`;
-const TooltipTextContainer = exports.TooltipTextContainer = _styledComponents.default.div` 
-  margin: 5px;
-  font-family: "Poppins", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  user-select: none;
-  &:hover {
-    cursor: pointer;
-  }
-`;
-const TooltipText = exports.TooltipText = _styledComponents.default.div` 
-  margin: 0; 
-`;

package/dist/stories/components/FormattedValue.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.FormattedValue = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CommonFunctions = require("./CommonFunctions");
-var _FormattedValue = require("./FormattedValue.style");
-const FormattedValue = props => {
-  const {
-    className,
-    title,
-    subtitle,
-    showTopValue,
-    value,
-    dotCut,
-    currencySign,
-    currencyType,
-    width,
-    height,
-    textcolor,
-    isPercent
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_FormattedValue.ControlsContainer, {
-    className: className || 'FormattedValue_ControlsContainer',
-    height: height,
-    width: width,
-    textcolor: textcolor
-  }, /*#__PURE__*/_react.default.createElement(_FormattedValue.Controls, {
-    className: "Controls",
-    height: height,
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_FormattedValue.TitleAndValueContainer, {
-    className: "TitleAndValueContainer"
-  }, title ? /*#__PURE__*/_react.default.createElement(_FormattedValue.Title, {
-    className: "Title",
-    width: width
-  }, title) : '', showTopValue && /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignAndFormattedValueContainer, {
-    className: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValueText, {
-    className: "FormattedValueText",
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignOrPercent, {
-    className: "CurrencySignOrPercent"
-  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '', /*#__PURE__*/_react.default.createElement(_FormattedValue.CurrencySignOrPercent, {
-    className: "CurrencySignOrPercent"
-  }, isPercent ? '%' : ''))), subtitle ? /*#__PURE__*/_react.default.createElement(_FormattedValue.Title, {
-    className: "Title",
-    width: width
-  }, subtitle) : '')));
-};
-exports.FormattedValue = FormattedValue;
-var _default = exports.default = FormattedValue;
-FormattedValue.defaultProps = {
-  className: 'FormattedValue_ControlsContainer',
-  title: '',
-  subtitle: '',
-  showTopValue: true,
-  value: 0,
-  dotCut: false,
-  currencySign: false,
-  currencyType: 'USD',
-  width: '100%',
-  height: '100%',
-  textcolor: '#212121',
-  isPercent: false
-};

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

@@ -1,91 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TitleAndValueContainer = exports.Title = exports.FormattedValueText = exports.CurrencySignOrPercent = exports.CurrencySignAndFormattedValueContainer = exports.ControlsContainer = exports.Controls = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-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-weight: 500;
-  font-size: 20px;
-  color: ${props => props.textcolor};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  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;  
-`;
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column; 
-`;
-const Title = exports.Title = _styledComponents.default.h4`
-  font-weight: 400;
-  font-size: 20px;
-  margin: 0;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;
-const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-`;
-const CurrencySignOrPercent = exports.CurrencySignOrPercent = _styledComponents.default.span`
-  font-weight: 500;
-  font-size: 16px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
-  }
-`;
-const FormattedValueText = exports.FormattedValueText = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 40px;
-  @media (max-width: 1536px) {
-    font-size: 34px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 28px;
-  }
-`;

package/dist/stories/components/Heatmap.js

@@ -1,184 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _framerMotion = require("framer-motion");
-var _Heatmap = require("./Heatmap.style");
-var _NoDataFoundMessage = require("./NoDataFoundMessage");
-const Heatmap = props => {
-  const {
-    title,
-    data,
-    lowLimit,
-    barHeight
-  } = props;
-  const [refreshRequired, setRefreshRequired] = (0, _react.useState)(false);
-  const [tooltip, setTooltip] = (0, _react.useState)(null);
-  const [barHeightState, setBarHeightState] = (0, _react.useState)(barHeight);
-  const barRefs = (0, _react.useRef)([]); // Array to store refs for each bar
-  const barsContainerRef = (0, _react.useRef)(null);
-  const [tooltipPosition, setTooltipPosition] = (0, _react.useState)({
-    x: 0,
-    y: 0
-  });
-
-  // Filter data based on lowLimit
-  const filteredData = data.filter(item => item.value >= lowLimit);
-
-  // Calculate the total value of all bars
-  const totalValue = filteredData.reduce((sum, item) => sum + item.value, 0);
-  (0, _react.useEffect)(() => {
-    setRefreshRequired(!refreshRequired);
-  }, [data]);
-
-  // Reset tooltip when height changes
-  (0, _react.useEffect)(() => {
-    setBarHeightState(barHeight);
-    setTooltip(null);
-  }, [barHeight]);
-
-  // Function to render Tooltip
-  const renderTooltip = item => {
-    if (tooltip && tooltipPosition && tooltip.label === `${item.label} - ${Math.round(item.value / totalValue * 100)}%`) {
-      const top = `${tooltipPosition.y}px`;
-      const left = `${tooltipPosition.x}px`;
-      return /*#__PURE__*/_react.default.createElement(_Heatmap.TooltipContainer, {
-        className: "TooltipContainer",
-        top: top,
-        left: left
-      }, item.label, ' ', "-", ' ', /*#__PURE__*/_react.default.createElement("span", null, Math.round(item.value / totalValue * 100), "%"));
-    }
-    return null;
-  };
-
-  // Function to render the bars and BarsContainer
-  const renderBars = () => /*#__PURE__*/_react.default.createElement(_Heatmap.BarsContainer, {
-    ref: barsContainerRef,
-    className: "BarsContainer",
-    height: barHeightState
-  }, filteredData.map((item, index) => {
-    const barWidth = item.value / totalValue * 100;
-    return /*#__PURE__*/_react.default.createElement(_Heatmap.BarWrapper, {
-      className: "BarWrapper"
-      // eslint-disable-next-line react/no-array-index-key
-      ,
-      key: index,
-      width: `${barWidth}%`,
-      height: barHeightState
-    }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, /*#__PURE__*/_react.default.createElement(_Heatmap.BarContainer, {
-      ref: el => {
-        barRefs.current[index] = el;
-      } // Attach ref
-      ,
-      className: "BarContainer",
-      height: barHeightState,
-      color: item.color,
-      initial: {
-        width: '0%',
-        opacity: 0
-      },
-      animate: {
-        width: '100%',
-        opacity: 1
-      },
-      exit: {
-        width: '100%',
-        opacity: 1
-      },
-      transition: {
-        duration: 0.4
-      },
-      onMouseEnter: e => {
-        var _barRefs$current$inde, _barsContainerRef$cur;
-        const barRect = (_barRefs$current$inde = barRefs.current[index]) === null || _barRefs$current$inde === void 0 ? void 0 : _barRefs$current$inde.getBoundingClientRect();
-        const parentRect = (_barsContainerRef$cur = barsContainerRef.current) === null || _barsContainerRef$cur === void 0 ? void 0 : _barsContainerRef$cur.getBoundingClientRect();
-        if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
-          setTooltip({
-            label: `${item.label} - ${Math.round(item.value / totalValue * 100)}%`
-          });
-          if (e.target.classList.contains('TooltipContainer')) {
-            return; // Exit early if mouse is over the tooltip
-          }
-          if (parentRect) {
-            let tooltipX = e.clientX; // Default: Position to the right of the cursor
-            const tooltipWidth = 200; // Estimate tooltip width (adjust as needed)
-
-            // If tooltip would overflow, move it to the left of the cursor
-            if (tooltipX + tooltipWidth > parentRect.right) {
-              tooltipX = e.clientX - tooltipWidth - 10;
-            }
-            setTooltipPosition({
-              x: tooltipX,
-              y: +30
-            });
-          }
-        }
-      },
-      onMouseLeave: e => {
-        var _barRefs$current$inde2;
-        const barRect = (_barRefs$current$inde2 = barRefs.current[index]) === null || _barRefs$current$inde2 === void 0 ? void 0 : _barRefs$current$inde2.getBoundingClientRect();
-        if (!barRect || e.clientX < barRect.x || e.clientX > barRect.x + barRect.width || e.clientY < barRect.y || e.clientY > barRect.y + barRect.height) {
-          setTooltip(null);
-        }
-      },
-      onMouseMove: e => {
-        var _barRefs$current$inde3, _barsContainerRef$cur2;
-        const barRect = (_barRefs$current$inde3 = barRefs.current[index]) === null || _barRefs$current$inde3 === void 0 ? void 0 : _barRefs$current$inde3.getBoundingClientRect();
-        const parentRect = (_barsContainerRef$cur2 = barsContainerRef.current) === null || _barsContainerRef$cur2 === void 0 ? void 0 : _barsContainerRef$cur2.getBoundingClientRect();
-        if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
-          if (e.target.classList.contains('TooltipContainer')) {
-            return; // Exit early if mouse is over the tooltip
-          }
-          if (parentRect) {
-            let tooltipX = e.clientX;
-            const tooltipWidth = 200;
-            if (tooltipX + tooltipWidth > parentRect.right) {
-              tooltipX = e.clientX - tooltipWidth - 10;
-            }
-            setTooltipPosition({
-              x: tooltipX,
-              y: +30
-            });
-          }
-        }
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Heatmap.BarLabel, {
-      className: "BarLabel"
-    }, Math.round(item.value / totalValue * 100), "%"), renderTooltip(item))));
-  }));
-
-  // Function to render the Legend Area
-  const renderLegend = () => /*#__PURE__*/_react.default.createElement(_Heatmap.LegendContainer, {
-    className: "LegendContainer"
-  }, filteredData.map((item, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  _react.default.createElement(_Heatmap.LegendItem, {
-    className: "LegendItem",
-    key: index
-  }, /*#__PURE__*/_react.default.createElement(_Heatmap.LegendColorBox, {
-    className: "LegendColorBox",
-    style: {
-      backgroundColor: item.color
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Heatmap.LegendLabel, {
-    className: "LegendLabel"
-  }, item.label))));
-  return /*#__PURE__*/_react.default.createElement(_Heatmap.HeatmapContainer, {
-    className: "HeatmapContainer"
-  }, !data || data.length === 0 ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
-    className: "NoDataFoundMessage",
-    noDataText: ""
-  }) : /*#__PURE__*/_react.default.createElement(_Heatmap.HeatmapWrapper, {
-    className: "HeatmapWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_Heatmap.TitleContainer, {
-    className: "TitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_Heatmap.Title, {
-    className: "Title"
-  }, title)), refreshRequired && renderBars(), !refreshRequired && renderBars(), renderLegend()));
-};
-var _default = exports.default = Heatmap;

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

@@ -1,151 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipContainer = exports.TitleContainer = exports.Title = exports.LegendLabel = exports.LegendItem = exports.LegendContainer = exports.LegendColorBox = exports.HeatmapWrapper = exports.HeatmapContainer = exports.BarsContainer = exports.BarWrapper = exports.BarLabel = exports.BarContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _framerMotion = require("framer-motion");
-const HeatmapContainer = exports.HeatmapContainer = _styledComponents.default.div`
-
-  display: flex;  
-  flex-direction: column;  
-  justify-content: flex-start;  
-  position: relative;
-  height: ${props => props.height};
-  width: 100%;  
-  font-family: "Poppins", sans-serif;
-  
-`;
-
-// Wrapper with padding
-const HeatmapWrapper = exports.HeatmapWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  padding: 20px;  
-  height: ${props => props.height};  
-`;
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start; 
-  margin: 0 0 10px 0; 
-`;
-const Title = exports.Title = _styledComponents.default.h3`
-  user-select: none;
-  text-align: left;
-  margin: 0;
-  font-family: "Poppins", sans-serif;   
-  font-weight: 400;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const BarsContainer = exports.BarsContainer = _styledComponents.default.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  height:  ${props => props.height};
-`;
-const BarWrapper = exports.BarWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  /* align-items: center; */
-  justify-content: flex-start;
-  align-items: stretch; /* Ensures full vertical stretch */
-  width: ${props => props.width};
-  height: ${props => props.height};
-`;
-const BarContainer = exports.BarContainer = (0, _styledComponents.default)(_framerMotion.motion.div)`
-  background-color: ${props => props.color};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${props => props.height};
-  width: 0%; /* Starts at 0% for animation */  
-`;
-const BarLabel = exports.BarLabel = _styledComponents.default.span`
-  color: white;
-  font-size: 14px;
-  font-weight: 400; 
-  user-select: none;
-`;
-const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
-  position: absolute;
-
-  top: ${props => props.top};
-  left: ${props => props.left};  
-  transition: left 0.8s ease, top 0.8s ease;
-
-  background-color: white;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  z-index: 10;
-  font-family: "Poppins", sans-serif;
-  user-select: none;
-
-  // Make the percentage bold 
-  span {
-     font-weight: bold;
-  }
-
-  // treeangle on the bottom
-  /* &:before {
-    content: "";
-    position: absolute;
-    bottom: -12px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 12px solid white;
-  } */
-`;
-const LegendContainer = exports.LegendContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 24px; 
-  margin-top: 10px;  
-  width: 100%;  
-  flex-shrink: 0;  
-`;
-const LegendItem = exports.LegendItem = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  margin-right: 15px;
-`;
-const LegendColorBox = exports.LegendColorBox = _styledComponents.default.div`
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  background-color: ${props => props.color};
-  border-radius: 2px;
-`;
-const LegendLabel = exports.LegendLabel = _styledComponents.default.span`  
-  user-select: none;
-  font-family: "Poppins", sans-serif;
-  color: #212121;
-  font-weight: 400; 
-  font-size: 14px; 
-  @media (max-width: 1536px) {
-    font-size: 12px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;