sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/TotalHorizontalCharts/TotalHorizontalCharts.js

@@ -1,218 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TotalHorizontalCharts = 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 _CommonFunctions = require("../../utils/CommonFunctions");
-var _TotalHorizontalCharts = require("./TotalHorizontalCharts.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-unused-vars */
-/* eslint-disable react/prop-types */
-/* eslint-disable react/no-unstable-nested-components */
-/* eslint-disable no-shadow */
-/* eslint-disable react/destructuring-assignment */
-
-const TotalHorizontalCharts = props => {
-  const {
-    title,
-    value,
-    dotCut,
-    currencySign,
-    currencyType,
-    chartsData,
-    showScrollerBarsCount,
-    labelFontSize,
-    labelLimitedLetters,
-    width,
-    height,
-    rightGap,
-    textColor,
-    noDataText,
-    showPercentAsideValue,
-    isDollar,
-    isPercentage,
-    showDollarSign,
-    className,
-    hideTotalValue,
-    hideTitle
-  } = props;
-  const barBackgrounds = chartsData.map(bg => bg.color);
-  const topHeader = (0, _react.useRef)();
-  const wrapper = (0, _react.useRef)();
-  const BAR_HEIGHT = 40; // Height of each bar including padding
-  const CHART_PADDING = 40; // Total padding for chart (top + bottom)
-
-  // Inside the TotalHorizontalCharts component
-  const calculateChartHeight = () => {
-    if (!chartsData?.length) return 0;
-    if (chartsData.length > showScrollerBarsCount) {
-      return chartsData.length * BAR_HEIGHT + CHART_PADDING;
-    }
-
-    // Calculate height to show only specified number of bars
-    const visibleBarsHeight = showScrollerBarsCount * BAR_HEIGHT;
-
-    // Use the smaller value between:
-    // 1. Height needed for all bars
-    // 2. Height needed for specified number of bars
-    return Math.min(chartsData.length * BAR_HEIGHT + CHART_PADDING, visibleBarsHeight + CHART_PADDING);
-  };
-  const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
-  const [tooltipText, setTooltipText] = (0, _react.useState)({
-    content: '',
-    clientX: 0,
-    clientY: 0
-  });
-  const CustomizedLabel = props => showPercentAsideValue ? <text x={props.x + (props.width <= 0 ? -12 : props.width) + 56} y={props.y + 4} dy={props.height / 2} dx={-8} fill={props.stroke} fontSize={12} fontWeight={500} textAnchor="middle">
-      {''.concat((0, _CommonFunctions.getFormattedValue)(props.value), (0, _CommonFunctions.getFormattedUnits)(props.value))}
-      <tspan fontWeight={400}>
-        {` (${(props.value / value * 100).toFixed(0)}%)`}
-      </tspan>
-    </text> : <text x={props.x + (props.width <= 0 ? -12 : props.width) + 40} y={props.y + 4} dy={props.height / 2} dx={-8} fill={props.stroke} fontSize={12} fontWeight={400} textAnchor="middle">
-      {!isDollar ? ''.concat((0, _CommonFunctions.getFormattedValue)(props.value), isPercentage ? '%' : (0, _CommonFunctions.getFormattedUnits)(props.value)) : ''.concat(showDollarSign ? '$' : '', (0, _CommonFunctions.getFormattedValue)(props.value), (0, _CommonFunctions.getFormattedUnits)(props.value))}
-    </text>;
-  const CustomizedTickBarChart = props => {
-    const {
-      x,
-      y,
-      height,
-      payload,
-      fill,
-      orientation,
-      stroke
-    } = props;
-    const handleMouseEnter = content => {
-      setTooltipText(prevState => ({
-        ...prevState,
-        content: content !== prevState.content ? content : prevState.content,
-        clientX: x / 1.2,
-        clientY: y - 20
-      }));
-      setShowLegendTooltip(true);
-    };
-    const handleMouseLeave = () => {
-      if (showLegendTooltip === false) return;
-      setTimeout(() => {
-        setShowLegendTooltip(false);
-      }, 1200);
-    };
-    if (chartsData && chartsData.length > 0 && payload) {
-      const chartsDataLabel = chartsData.filter(item => item.name === payload.value);
-      if (chartsDataLabel && chartsDataLabel.length > 0) {
-        return <g onMouseEnter={() => handleMouseEnter(payload.value)} onMouseLeave={handleMouseLeave}>
-            <text style={{
-            whiteSpace: 'nowrap'
-          }} height={height} x={20} y={y} fontSize={labelFontSize} orientation={orientation} stroke={stroke} textAnchor="start"
-          // verticalAnchor="middle"
-          fill={fill}>
-              {payload.value.length > labelLimitedLetters - 1 ? `${payload.value.slice(0, labelLimitedLetters)}...` : payload.value}
-            </text>
-          </g>;
-      }
-      return null;
-    }
-    return null;
-  };
-  return <_TotalHorizontalCharts.ControlsContainer ref={wrapper} height={height} width={width} textColor={textColor} scroller={chartsData.length > showScrollerBarsCount ? 'auto' : 'hidden'} className={className}>
-      {chartsData?.length > 0 ? <>
-          {!hideTitle || !hideTotalValue ? <_TotalHorizontalCharts.CardHeader ref={topHeader} className="CardHeader">
-              {!hideTitle ? <_TotalHorizontalCharts.Title>{title}</_TotalHorizontalCharts.Title> : ''}
-
-              {!hideTotalValue ? <_TotalHorizontalCharts.TotalValue className="TotalValue">
-                    {currencySign && <_TotalHorizontalCharts.CurrencySign className="CurrencySign">
-                        {(0, _CommonFunctions.getCurrencySign)(currencyType, value)}
-                      </_TotalHorizontalCharts.CurrencySign>}
-
-                    {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) : ''}
-                  </_TotalHorizontalCharts.TotalValue> : ''}
-            </_TotalHorizontalCharts.CardHeader> : ''}
-          <_recharts.ResponsiveContainer width="100%" height={calculateChartHeight()}>
-            <_recharts.BarChart layout="vertical" data={chartsData} margin={{
-          top: 10,
-          right: 20,
-          bottom: 20,
-          left: 10
-        }}>
-              <_recharts.XAxis type="number" domain={[0, dataMax => dataMax * rightGap]}
-          // allowDataOverflow={false}
-          hide />
-              <_recharts.YAxis dataKey="name" type="category" width={labelLimitedLetters * 10} tickLine={false} axisLine={false} interval={0} allowDataOverflow tick={CustomizedTickBarChart} />
-
-              <_recharts.Bar dataKey="value" barSize={20} fill="#8884d8" barCategoryGap={10} barGap={5}>
-                <_recharts.LabelList dataKey="value" content={CustomizedLabel} />
-
-                {chartsData.map((entry, index) =>
-            // eslint-disable-next-line react/no-array-index-key
-            <_recharts.Cell key={`cell-${index}`} fill={barBackgrounds[index % 20]} />)}
-              </_recharts.Bar>
-              {showLegendTooltip && <_TspanTooltip.default direction="top" content={tooltipText.content} top={tooltipText.clientY} left={tooltipText.clientX} style={{
-            pointerEvents: 'none'
-          }} />}
-
-            </_recharts.BarChart>
-          </_recharts.ResponsiveContainer>
-        </> : <_NoDataFoundMessage.NoDataFoundMessage noDataText={noDataText} />}
-    </_TotalHorizontalCharts.ControlsContainer>;
-};
-exports.TotalHorizontalCharts = TotalHorizontalCharts;
-var _default = exports.default = TotalHorizontalCharts;
-TotalHorizontalCharts.propTypes = {
-  className: _propTypes.default.string,
-  title: _propTypes.default.string,
-  value: _propTypes.default.number,
-  dotCut: _propTypes.default.bool,
-  currencySign: _propTypes.default.bool,
-  currencyType: _propTypes.default.string,
-  chartsData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    name: _propTypes.default.string,
-    value: _propTypes.default.number,
-    color: _propTypes.default.string
-  })),
-  showScrollerBarsCount: _propTypes.default.number,
-  showPercentAsideValue: _propTypes.default.bool,
-  labelFontSize: _propTypes.default.number,
-  labelLimitedLetters: _propTypes.default.number,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  rightGap: _propTypes.default.number,
-  textColor: _propTypes.default.string,
-  noDataText: _propTypes.default.string,
-  isDollar: _propTypes.default.bool,
-  isPercentage: _propTypes.default.bool,
-  showDollarSign: _propTypes.default.bool,
-  hideTotalValue: _propTypes.default.bool,
-  hideTitle: _propTypes.default.bool
-};
-TotalHorizontalCharts.defaultProps = {
-  className: '',
-  title: 'SALES',
-  value: 0,
-  dotCut: false,
-  currencySign: false,
-  currencyType: 'USD',
-  chartsData: [],
-  showScrollerBarsCount: 7,
-  showPercentAsideValue: false,
-  labelFontSize: 10,
-  labelLimitedLetters: 12,
-  width: '100%',
-  height: '100%',
-  rightGap: 1,
-  textColor: '#212121',
-  noDataText: 'No Data',
-  isDollar: true,
-  isPercentage: false,
-  showDollarSign: true,
-  hideTotalValue: false,
-  hideTitle: false
-};

package/dist/components/TotalHorizontalCharts/TotalHorizontalCharts.stories.js

@@ -1,291 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SalesGreenTheme = exports.SalesBlueTheme = exports.HideTotalValue = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TotalHorizontalCharts = _interopRequireDefault(require("./TotalHorizontalCharts"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const chartsData1 = [{
-  name: 'LAYS',
-  value: 28.15,
-  color: 'rgba(6, 103, 104, 1)'
-}, {
-  name: 'TOSTITOS',
-  value: 16.53,
-  color: 'rgba(6, 103, 104, 1)'
-}, {
-  name: 'DORITOS',
-  value: 14.04,
-  color: 'rgba(6, 103, 104, 1)'
-}
-// {
-//   name: 'FRITO LAY',
-//   value: 8.98,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'CHEETOS',
-//   value: 8.86,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'RUFFLES',
-//   value: 7.44,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'FUNYUNS',
-//   value: 2.77,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'CHESTERS',
-//   value: 2.73,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'BAKEN ETS',
-//   value: 1.90,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'SMARTFOOD',
-//   value: 1.79,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'SANTITAS',
-//   value: 1.47,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'MUNCHOS',
-//   value: 1.25,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-// {
-//   name: 'SUNCHIPS',
-//   value: 1.24,
-//   color: 'rgba(6, 103, 104, 1)',
-// },
-];
-const chartsData2 = [{
-  name: 'Lysoe',
-  value: 52795.7313,
-  color: 'rgba(94, 101, 238, 0.1)'
-}, {
-  name: 'Ensueno',
-  value: 29792.315,
-  color: 'rgba(94, 101, 238, 0.2)'
-}, {
-  name: 'Starbucks Frappuccino',
-  value: 20,
-  color: 'rgba(94, 101, 238, 0.3)'
-}, {
-  name: 'Pringles',
-  value: 15,
-  color: 'rgba(94, 101, 238, 0.4)'
-}, {
-  name: 'Chunky Bowls',
-  value: 10,
-  color: 'rgba(94, 101, 238, 0.4)'
-}];
-var _default = exports.default = {
-  title: 'SAG BI/TotalHorizontalCharts',
-  component: _TotalHorizontalCharts.default,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figspec',
-      accessToken: 'figd_vlq2HLcwzTQLvrhLrFWY_Be8CqbuyKcltE9oyHnR'
-    }
-  },
-  argTypes: {
-    width: {
-      name: 'Width',
-      description: 'Width of the control (in px / %)',
-      control: {
-        type: 'text'
-      }
-    },
-    height: {
-      name: 'Height',
-      description: 'Height of the control (in px / %)',
-      control: {
-        type: 'text'
-      }
-    },
-    chartsData: {
-      name: 'Charts Data',
-      description: 'Array [] of objects: {displayName: string, value: number, color: string} to fill the pie chart. Please note: the name must be unique'
-    },
-    title: {
-      name: 'Title',
-      description: 'Title on top of the component',
-      control: {
-        type: 'text'
-      }
-    },
-    value: {
-      name: 'Value',
-      description: 'Value (total)',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      }
-    },
-    hideTitle: {
-      name: 'Hide Title',
-      description: 'Hide Title',
-      control: {
-        type: 'boolean'
-      }
-    },
-    hideTotalValue: {
-      name: 'Hide Total Value',
-      description: 'Hide Total Value',
-      control: {
-        type: 'boolean'
-      }
-    },
-    dotCut: {
-      name: 'Dot Cut',
-      description: 'True/false - format total value with dot cut',
-      control: {
-        type: 'boolean'
-      }
-    },
-    currencySign: {
-      name: 'Currency Sign',
-      description: 'True/false - show/hide currency sign before total value',
-      control: {
-        type: 'boolean'
-      }
-    },
-    currencyType: {
-      name: 'Currency Type',
-      description: 'Choose currency sign',
-      options: ['USD', 'EUR', 'ILS', 'GBP', 'JPY'],
-      control: {
-        type: 'select'
-      }
-    },
-    showPercentAsideValue: {
-      name: 'Show Percent Aside Value',
-      description: 'Show the percentage aside the value',
-      control: {
-        type: 'boolean'
-      }
-    },
-    rightGap: {
-      name: 'Right Gap',
-      description: 'Right gap',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 10
-      }
-    },
-    textColor: {
-      name: 'Text Color',
-      description: 'Sets the text color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    showScrollerBarsCount: {
-      name: 'Show Scroller Bars Count',
-      description: 'Number of bars to start activate the scroller',
-      control: {
-        type: 'number'
-      }
-    },
-    labelFontSize: {
-      name: 'Label Font Size',
-      description: 'Font size of the labels',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100
-      }
-    },
-    labelLimitedLetters: {
-      name: 'Label Limited Letters',
-      description: 'Limit the number of letters in the label',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100
-      }
-    },
-    noDataText: {
-      name: 'No Data Text',
-      description: 'Text to display when no data found',
-      control: {
-        type: 'text'
-      }
-    }
-  }
-};
-const Template = args => <_TotalHorizontalCharts.default {...args} />;
-const SalesGreenTheme = exports.SalesGreenTheme = Template.bind({});
-SalesGreenTheme.args = {
-  title: 'SALES',
-  value: 56500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  chartsData: chartsData1,
-  showPercentAsideValue: true,
-  labelFontSize: 12,
-  labelLimitedLetters: 12,
-  showScrollerBarsCount: 5,
-  width: '600px',
-  height: '360px',
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  hideTotalValue: false,
-  hideTitle: false
-};
-const SalesBlueTheme = exports.SalesBlueTheme = Template.bind({});
-SalesBlueTheme.args = {
-  title: 'SALES',
-  value: 56500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  chartsData: chartsData2,
-  showPercentAsideValue: false,
-  labelFontSize: 12,
-  labelLimitedLetters: 15,
-  showScrollerBarsCount: 5,
-  width: '500px',
-  height: '240px',
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  hideTotalValue: false,
-  hideTitle: false
-};
-const HideTotalValue = exports.HideTotalValue = Template.bind({});
-HideTotalValue.args = {
-  title: 'SALES',
-  value: 56500,
-  dotCut: true,
-  currencySign: true,
-  currencyType: 'USD',
-  chartsData: chartsData1,
-  showPercentAsideValue: true,
-  labelFontSize: 12,
-  labelLimitedLetters: 12,
-  showScrollerBarsCount: 5,
-  width: '600px',
-  height: '360px',
-  textColor: '#212121',
-  noDataText: 'The selected event is a TPR or has no offer, therefore there is no redeemers data to display.',
-  hideTotalValue: true,
-  hideTitle: true
-};

package/dist/components/TotalHorizontalCharts/TotalHorizontalCharts.style.js

@@ -1,93 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TotalValue = exports.Title = exports.CurrencySign = exports.ControlsContainer = exports.ChartWrapper = exports.CardHeader = 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`
-  font-family: "Poppins", sans-serif;
-  background-color: white;
-  color: ${props => props.textColor};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  /* display: flex;
-  flex-direction: column;
-  overflow: hidden; */
-  overflow-y: ${props => props.scroller};
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div`
-  overflow-y: auto;
-  height: 100%;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const CardHeader = exports.CardHeader = _styledComponents.default.div`
-  padding: 16px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background-color: white;
-`;
-const TotalValue = exports.TotalValue = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 40px;
-  display: flex;
-  align-items: baseline;
-  line-height: 1;
-  @media (max-width: 1536px) {
-    font-size: 24px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 20px;
-  }
-`;
-const Title = exports.Title = _styledComponents.default.h4`
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 1;
-  margin: 0 0 8px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const CurrencySign = exports.CurrencySign = _styledComponents.default.span`
-  font-weight: 500;
-  font-size: 16px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
-  }
-`;

package/dist/components/TspanTooltip/TspanTooltip.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _TspanTooltip = require("./TspanTooltip.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Tooltip = props => {
-  const {
-    className,
-    top,
-    left,
-    direction,
-    content
-  } = props;
-  return <_TspanTooltip.TooltipContainer className={className} top={`${top}px`} left={`${left}px`}>
-      <_TspanTooltip.TooltipWrapper>
-        <_TspanTooltip.TooltipTip className={`controls ${direction || 'top'}`}>
-          {content}
-        </_TspanTooltip.TooltipTip>
-      </_TspanTooltip.TooltipWrapper>
-    </_TspanTooltip.TooltipContainer>;
-};
-var _default = exports.default = Tooltip;
-Tooltip.propTypes = {
-  className: _propTypes.default.string,
-  top: _propTypes.default.number,
-  left: _propTypes.default.number,
-  direction: _propTypes.default.string,
-  content: _propTypes.default.string
-};
-Tooltip.defaultProps = {
-  className: '',
-  top: 0,
-  left: 0,
-  direction: 'top',
-  content: ''
-};