sag_components 2.0.0-beta → 2.0.0-beta2

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

@@ -1,89 +0,0 @@
-"use strict";
-
-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"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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/components/FormattedValue/FormattedValue.js

@@ -1,87 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.FormattedValue = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CommonFunctions = require("../../utils/CommonFunctions");
-var _FormattedValue = require("./FormattedValue.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FormattedValue = props => {
-  const {
-    className,
-    title,
-    subtitle,
-    showTopValue,
-    value,
-    dotCut,
-    currencySign,
-    currencyType,
-    width,
-    height,
-    textcolor,
-    isPercent
-  } = props;
-  return <_FormattedValue.ControlsContainer className={className || 'FormattedValue_ControlsContainer'} height={height} width={width} textcolor={textcolor}>
-
-      <_FormattedValue.Controls className="Controls" height={height} width={width}>
-        <_FormattedValue.TitleAndValueContainer className="TitleAndValueContainer">
-
-          {title ? <_FormattedValue.Title className="Title" width={width}>
-              {title}
-            </_FormattedValue.Title> : ''}
-
-          {showTopValue && <_FormattedValue.CurrencySignAndFormattedValueContainer className="CurrencySignAndFormattedValueContainer">
-              <_FormattedValue.FormattedValueText className="FormattedValueText" width={width}>
-                <_FormattedValue.CurrencySignOrPercent className="CurrencySignOrPercent">
-                  {currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''}
-                </_FormattedValue.CurrencySignOrPercent>
-                {dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value?.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value)}
-                {dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''}
-
-                <_FormattedValue.CurrencySignOrPercent className="CurrencySignOrPercent">
-                  {isPercent ? '%' : ''}
-                </_FormattedValue.CurrencySignOrPercent>
-              </_FormattedValue.FormattedValueText>
-            </_FormattedValue.CurrencySignAndFormattedValueContainer>}
-
-          {subtitle ? <_FormattedValue.Title className="Title" width={width}>
-              {subtitle}
-            </_FormattedValue.Title> : ''}
-
-        </_FormattedValue.TitleAndValueContainer>
-      </_FormattedValue.Controls>
-    </_FormattedValue.ControlsContainer>;
-};
-exports.FormattedValue = FormattedValue;
-var _default = exports.default = FormattedValue;
-FormattedValue.propTypes = {
-  className: _propTypes.default.string,
-  title: _propTypes.default.string,
-  subtitle: _propTypes.default.string,
-  showTopValue: _propTypes.default.bool,
-  value: _propTypes.default.number,
-  dotCut: _propTypes.default.bool,
-  currencySign: _propTypes.default.bool,
-  currencyType: _propTypes.default.string,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  textcolor: _propTypes.default.string,
-  isPercent: _propTypes.default.bool
-};
-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/components/FormattedValue/FormattedValue.stories.js

@@ -1,183 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Units = exports.TwoTitles = exports.TotalCost = exports.Percent = exports.OnlyBottomTitle = exports.NoTitle = exports.NoDotCut = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _FormattedValue = require("./FormattedValue");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG BI/FormattedValue',
-  component: _FormattedValue.FormattedValue,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figspec'
-      // accessToken: 'figd_vlq2HLcwzTQLvrhLrFWY_Be8CqbuyKcltE9oyHnR',
-    }
-  },
-  argTypes: {
-    title: {
-      name: 'title',
-      control: {
-        type: 'text'
-      },
-      description: 'title on top of the component'
-    },
-    subtitle: {
-      name: 'subtitle',
-      control: {
-        type: 'text'
-      },
-      description: 'title on top of the component'
-    },
-    value: {
-      name: 'value',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      },
-      description: 'value (total) '
-    },
-    dotCut: {
-      name: 'dotCut',
-      control: {
-        type: 'boolean'
-      },
-      description: 'true/false - format total value with dot cut'
-    },
-    currencySign: {
-      name: 'currencySign',
-      control: {
-        type: 'boolean'
-      },
-      description: 'true/false - show/hide currency sign before total value'
-    },
-    currencyType: {
-      name: 'currencyType',
-      options: ['USD', 'EUR', 'ILS', 'GBP', 'JPY'],
-      control: {
-        type: 'select'
-      }
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the control (in px / %)'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the control (in px / %)'
-    },
-    textcolor: {
-      name: 'textcolor',
-      description: 'Sets the text color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    isPercent: {
-      name: 'isPercent',
-      control: {
-        type: 'boolean'
-      },
-      description: 'true/false - isPercent'
-    }
-  }
-};
-const Template = args => <_FormattedValue.FormattedValue {...args} />;
-const TotalCost = exports.TotalCost = Template.bind({});
-TotalCost.args = {
-  title: 'Total Cost',
-  value: 36500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  textcolor: '#212121',
-  height: '100%',
-  width: '100%',
-  isPercent: false
-};
-const NoDotCut = exports.NoDotCut = Template.bind({});
-NoDotCut.args = {
-  title: 'Total Cost',
-  value: 36500,
-  dotCut: false,
-  currencySign: true,
-  currencyType: 'USD',
-  textcolor: '#212121',
-  height: '100%',
-  width: '100%',
-  isPercent: false
-};
-const Units = exports.Units = Template.bind({});
-Units.args = {
-  title: 'Total Units',
-  value: 55201,
-  dotCut: true,
-  currencySign: false,
-  currencyType: '',
-  textcolor: '#212121',
-  height: '100%',
-  width: '100%',
-  isPercent: false
-};
-const Percent = exports.Percent = Template.bind({});
-Percent.args = {
-  title: 'Avg. Products Category Penetration',
-  value: 21,
-  dotCut: true,
-  currencySign: false,
-  currencyType: '',
-  textcolor: '#212121',
-  height: '100%',
-  width: '100%',
-  isPercent: true
-};
-const TwoTitles = exports.TwoTitles = Template.bind({});
-TwoTitles.args = {
-  title: 'Total Product Line Triers',
-  subtitle: 'Product Line Triers VS. Repeaters',
-  value: 36500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  textcolor: '#212121',
-  height: '100%',
-  width: '100%',
-  isPercent: false
-};
-const OnlyBottomTitle = exports.OnlyBottomTitle = Template.bind({});
-OnlyBottomTitle.args = {
-  title: '',
-  subtitle: 'Product Line Triers VS. Repeaters',
-  value: 36500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  textcolor: '#212121',
-  height: '100%',
-  width: '100%',
-  isPercent: false
-};
-const NoTitle = exports.NoTitle = Template.bind({});
-NoTitle.args = {
-  title: '',
-  subtitle: '',
-  value: 36500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  textcolor: '#212121',
-  height: '100%',
-  width: '100%',
-  isPercent: false
-};

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

@@ -1,91 +0,0 @@
-"use strict";
-
-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"));
-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-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/components/Heatmap/Heatmap.js

@@ -1,177 +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 _framerMotion = require("framer-motion");
-var _Heatmap = require("./Heatmap.style");
-var _NoDataFoundMessage = require("../NoDataFoundMessage/NoDataFoundMessage");
-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 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 <_Heatmap.TooltipContainer className="TooltipContainer" top={top} left={left}>
-          {item.label}
-          {' '}
-          -
-          {' '}
-          <span>
-            {Math.round(item.value / totalValue * 100)}
-            %
-          </span>
-        </_Heatmap.TooltipContainer>;
-    }
-    return null;
-  };
-
-  // Function to render the bars and BarsContainer
-  const renderBars = () => <_Heatmap.BarsContainer ref={barsContainerRef} className="BarsContainer" height={barHeightState}>
-      {filteredData.map((item, index) => {
-      const barWidth = item.value / totalValue * 100;
-      return <_Heatmap.BarWrapper className="BarWrapper"
-      // eslint-disable-next-line react/no-array-index-key
-      key={index} width={`${barWidth}%`} height={barHeightState}>
-            <_framerMotion.AnimatePresence>
-              <_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 => {
-            const barRect = barRefs.current[index]?.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)}%`
-              });
-              // Prevent setting tooltip position if mouse is over the tooltip element
-              if (e.target.classList.contains('TooltipContainer')) {
-                return; // Exit early if mouse is over the tooltip
-              }
-              if (e.nativeEvent?.layerX && e.nativeEvent?.layerY) {
-                setTooltipPosition({
-                  // eslint-disable-next-line no-unsafe-optional-chaining
-                  x: e.nativeEvent?.layerX + 10,
-                  // eslint-disable-next-line no-unsafe-optional-chaining
-                  y: e.nativeEvent?.layerY + 20
-                });
-              }
-            }
-          }} onMouseLeave={e => {
-            const barRect = barRefs.current[index]?.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 => {
-            const barRect = barRefs.current[index]?.getBoundingClientRect();
-            if (barRect && e.clientX > barRect.x && e.clientX < barRect.x + barRect.width && e.clientY > barRect.y && e.clientY < barRect.y + barRect.height) {
-              // Prevent setting tooltip position if mouse is over the tooltip element
-              if (e.target.classList.contains('TooltipContainer')) {
-                return; // Exit early if mouse is over the tooltip
-              }
-              if (e.nativeEvent?.layerX && e.nativeEvent?.layerY) {
-                setTooltipPosition({
-                  // eslint-disable-next-line no-unsafe-optional-chaining
-                  x: e.nativeEvent?.layerX + 10,
-                  // eslint-disable-next-line no-unsafe-optional-chaining
-                  y: e.nativeEvent?.layerY + 20
-                });
-              }
-            }
-          }}>
-
-                <_Heatmap.BarLabel className="BarLabel">
-                  {Math.round(item.value / totalValue * 100)}
-                  %
-                </_Heatmap.BarLabel>
-                {renderTooltip(item)}
-              </_Heatmap.BarContainer>
-
-            </_framerMotion.AnimatePresence>
-
-          </_Heatmap.BarWrapper>;
-    })}
-    </_Heatmap.BarsContainer>;
-
-  // Function to render the Legend Area
-  const renderLegend = () => <_Heatmap.LegendContainer className="LegendContainer">
-      {filteredData.map((item, index) =>
-    // eslint-disable-next-line react/no-array-index-key
-    <_Heatmap.LegendItem className="LegendItem" key={index}>
-          <_Heatmap.LegendColorBox className="LegendColorBox" style={{
-        backgroundColor: item.color
-      }} />
-          <_Heatmap.LegendLabel className="LegendLabel">{item.label}</_Heatmap.LegendLabel>
-        </_Heatmap.LegendItem>)}
-    </_Heatmap.LegendContainer>;
-  return <_Heatmap.HeatmapContainer className="HeatmapContainer">
-      {!data || data.length === 0 ? <_NoDataFoundMessage.NoDataFoundMessage className="NoDataFoundMessage" noDataText="" /> : <_Heatmap.HeatmapWrapper className="HeatmapWrapper">
-          <_Heatmap.TitleContainer className="TitleContainer">
-            <_Heatmap.Title className="Title">{title}</_Heatmap.Title>
-          </_Heatmap.TitleContainer>
-        
-          {refreshRequired && renderBars()}
-          {!refreshRequired && renderBars()}
-
-          {renderLegend()}
-        </_Heatmap.HeatmapWrapper>}
-    </_Heatmap.HeatmapContainer>;
-};
-Heatmap.propTypes = {
-  title: _propTypes.default.string.isRequired,
-  data: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.number.isRequired,
-    label: _propTypes.default.string.isRequired,
-    color: _propTypes.default.string.isRequired
-  })).isRequired,
-  lowLimit: _propTypes.default.number.isRequired,
-  barHeight: _propTypes.default.string.isRequired
-};
-var _default = exports.default = Heatmap;