sag_components 2.0.0-beta27 → 2.0.0-beta28

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

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

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

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

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

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