sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/BarChartsByWeeks/BarChartsByWeeks.js

@@ -1,308 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BarChartsByWeeks = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _recharts = require("recharts");
-var _FormattedValue = require("../FormattedValue/FormattedValue");
-var _CommonFunctions = require("../../utils/CommonFunctions");
-var _BarChartsByWeeks = require("./BarChartsByWeeks.style");
-var _PerformanceAnalyticsLegend = _interopRequireDefault(require("../PerformanceAnalyticsLegend/PerformanceAnalyticsLegend"));
-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-nested-ternary */
-
-const ICON_TYPE_SQUARE = 'Square';
-const ICON_TYPE_LEGEND_UNION_ICON = 'LegendUnionIcon';
-const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
-const BarChartsByWeeks = props => {
-  const {
-    className,
-    title,
-    showHeaderTopValue,
-    headerValueTopTitle,
-    headerValueBottomTitle,
-    headerValue,
-    HeaderValueCurrencyType,
-    HeaderValueIsPercent,
-    barChartData,
-    isTitleOriganal,
-    width,
-    height,
-    barChartColor,
-    barChartSecondColor,
-    xselectedColor,
-    tooltipTitle,
-    tooltipSecondTitle,
-    startWeekRange = 0,
-    endWeekRange = 0,
-    yAxisCounter,
-    isPercentValue,
-    interval,
-    showTitle,
-    showLegend,
-    legendData,
-    showTwoBars,
-    setLimitHeight,
-    setLimitLow
-  } = props;
-
-  // const [BarChartContainerWidth, setBarChartContainerWidth] = useState(0);
-  // const [BarChartContainerHeight, setBarChartContainerHeight] = useState(0);
-
-  const controlsContainerRef = (0, _react.useRef)();
-
-  // useEffect(() => {
-  //   const { offsetWidth } = controlsContainerRef.current;
-  //   setBarChartContainerWidth(offsetWidth - 20);
-  // }, [width]);
-
-  // useEffect(() => {
-  //   const { offsetHeight } = controlsContainerRef.current;
-  //   setBarChartContainerHeight(offsetHeight - 40);
-  // }, [height]);
-
-  const displayFormattedValue = value => {
-    if (!value) return '';
-    let formattedValue = '';
-    formattedValue = isPercentValue ? ''.concat('', value.toFixed(1), '%') : ''.concat('', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
-    return formattedValue;
-  };
-  const formmatedData = barChartData?.map(item => {
-    if (setLimitHeight && item.value > setLimitHeight) {
-      return {
-        title: item.title,
-        value: setLimitHeight,
-        secondValue: item.secondValue
-      };
-    }
-    if (setLimitLow && item.value < setLimitLow) {
-      return {
-        title: item.title,
-        value: setLimitLow,
-        secondValue: item.secondValue
-      };
-    }
-    return {
-      title: item.title,
-      value: item.value,
-      secondValue: item.secondValue
-    };
-  });
-
-  // eslint-disable-next-line react/no-unstable-nested-components
-  const CustomTooltip = tooltipData => {
-    const {
-      active,
-      payload,
-      label
-    } = tooltipData;
-    if (!active || !payload || payload?.length === 0) return null;
-    const week = isTitleOriganal ? label : label && label?.toString().length === 6 ? label.toString().substring(4, 6) : 0;
-    let currentTooltipValue = 0;
-    let currentTooltipSecondValue = 0;
-    if (payload[0].payload?.value) currentTooltipValue = payload[0].payload?.value;
-    if (payload[0].payload?.secondValue) currentTooltipSecondValue = payload[0].payload?.secondValue;
-    return <_BarChartsByWeeks.TooltipDiv>
-        <_BarChartsByWeeks.TooltipTitle>{`${isTitleOriganal ? '' : 'Week: '}${week}`}</_BarChartsByWeeks.TooltipTitle>
-        <_BarChartsByWeeks.TooltipLabel>
-          {`${tooltipTitle}             
-            ${displayFormattedValue(currentTooltipValue)}                                       
-          `}
-        </_BarChartsByWeeks.TooltipLabel>
-        {currentTooltipSecondValue ? <_BarChartsByWeeks.TooltipLabel>
-            {`${tooltipSecondTitle}                        
-            ${displayFormattedValue(currentTooltipSecondValue)}                       
-          `}
-          </_BarChartsByWeeks.TooltipLabel> : ''}
-      </_BarChartsByWeeks.TooltipDiv>;
-  };
-  const getWeek = () => {
-    if (!barChartData || barChartData?.length === 0) return null;
-    const newFormattedData = barChartData?.map(item => ({
-      ...item,
-      titleWeek: item.title && isTitleOriganal ? item.title : item.title?.toString().length === 6 ? item.title.toString().substring(4, 6) : 0
-    }));
-    return newFormattedData;
-  };
-  const displayEventWeeksElements = () => {
-    if (!barChartData || barChartData.length === 0) return '';
-    return <_BarChartsByWeeks.EventWeeksLegendDataElementsContainer>
-        {getWeek()?.map(item => <_BarChartsByWeeks.EventWeeksLegendDataElement color={item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : ''} textColor={item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1'} fontWeight={item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400} borderLeftRadius={startWeekRange && item?.title?.toString() === startWeekRange?.toString() ? '12px' : '0px'} borderRightRadius={endWeekRange && item?.title?.toString() === endWeekRange?.toString() ? '12px' : '0px'}>
-            {item.titleWeek}
-          </_BarChartsByWeeks.EventWeeksLegendDataElement>)}
-      </_BarChartsByWeeks.EventWeeksLegendDataElementsContainer>;
-  };
-  const displayEventWeeksLegendData = () => <_BarChartsByWeeks.EventWeeksLegendMainContainer className="EventWeeksLegendMainContainer">
-      {displayEventWeeksElements()}
-    </_BarChartsByWeeks.EventWeeksLegendMainContainer>;
-  const getControlsHeight = () => {
-    if (!controlsContainerRef?.current) return '100%';
-    const {
-      offsetHeight
-    } = controlsContainerRef.current;
-    let newHeight = offsetHeight - 20;
-    if (title) {
-      newHeight -= 20;
-    }
-    if (headerValueTopTitle) {
-      newHeight -= 16;
-    }
-    if (headerValueBottomTitle) {
-      newHeight -= 16;
-    }
-    if (headerValue) {
-      newHeight -= 42;
-    }
-    if (showLegend) {
-      newHeight -= 34;
-    }
-    return `${newHeight}px`;
-  };
-  return <_BarChartsByWeeks.ControlsContainer className={className} height={height} width={width} ref={controlsContainerRef}>
-      <_BarChartsByWeeks.Controls height={getControlsHeight()}>
-        {showTitle && <_BarChartsByWeeks.TitleAndValueContainer>
-            <_BarChartsByWeeks.Title>{title}</_BarChartsByWeeks.Title>
-            <_FormattedValue.FormattedValue title={headerValueTopTitle} subtitle={headerValueBottomTitle} showTopValue={showHeaderTopValue} value={headerValue} currencyType={HeaderValueCurrencyType} isPercent={HeaderValueIsPercent} dotCut />
-          </_BarChartsByWeeks.TitleAndValueContainer>}
-
-        <_recharts.ResponsiveContainer width="100%" height="100%">
-          <_recharts.BarChart width={width} height={height} data={formmatedData} margin={{
-          top: 20,
-          right: 0,
-          bottom: 0,
-          left: -5
-        }}>
-            <_recharts.CartesianGrid strokeDasharray="3 3" vertical={false} />
-            <_recharts.XAxis dataKey="title" tick={false} tickLine={false} />
-            <_recharts.YAxis tickCount={yAxisCounter} interval={interval || 'preserveEnd'} domain={[0, 'auto']} tick={{
-            fill: '#B1B1B1'
-          }} axisLine={false} fontWeight={400} fontSize="12px" tickLine={false} tickFormatter={value => `${displayFormattedValue(value)}`} />
-            <_recharts.Tooltip content={<CustomTooltip />} />
-            <_recharts.Tooltip />
-            {!showTwoBars ? <_recharts.Bar dataKey="value" name="title" maxBarSize={30} radius={[4, 4, 0, 0]} fill={barChartColor} /> : <>
-                <_recharts.Bar dataKey="value" name="title" maxBarSize={30} stackId="a" fill={barChartColor} />
-                <_recharts.Bar dataKey="secondValue" name="title" maxBarSize={30} radius={[4, 4, 0, 0]} stackId="a" fill={barChartSecondColor} />
-              </>}
-          </_recharts.BarChart>
-        </_recharts.ResponsiveContainer>
-
-        {displayEventWeeksLegendData()}
-
-        {showLegend && <_BarChartsByWeeks.LegendWrapper>
-            <_PerformanceAnalyticsLegend.default legendData={legendData} />
-          </_BarChartsByWeeks.LegendWrapper>}
-      </_BarChartsByWeeks.Controls>
-    </_BarChartsByWeeks.ControlsContainer>;
-};
-exports.BarChartsByWeeks = BarChartsByWeeks;
-var _default = exports.default = BarChartsByWeeks;
-BarChartsByWeeks.propTypes = {
-  className: _propTypes.default.string,
-  title: _propTypes.default.string,
-  showHeaderTopValue: _propTypes.default.bool,
-  headerValueTopTitle: _propTypes.default.string,
-  headerValueBottomTitle: _propTypes.default.string,
-  headerValue: _propTypes.default.number,
-  HeaderValueCurrencyType: _propTypes.default.string,
-  HeaderValueIsPercent: _propTypes.default.bool,
-  barChartData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string,
-    value: _propTypes.default.number
-  })),
-  isTitleOriganal: _propTypes.default.bool,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  barChartColor: _propTypes.default.string,
-  barChartSecondColor: _propTypes.default.string,
-  xselectedColor: _propTypes.default.string,
-  startWeekRange: _propTypes.default.string,
-  endWeekRange: _propTypes.default.string,
-  tooltipTitle: _propTypes.default.string,
-  tooltipSecondTitle: _propTypes.default.string,
-  yAxisCounter: _propTypes.default.number,
-  isPercentValue: _propTypes.default.bool,
-  interval: _propTypes.default.string,
-  showTitle: _propTypes.default.bool,
-  showLegend: _propTypes.default.bool,
-  legendData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    title: _propTypes.default.string.isRequired,
-    iconType: _propTypes.default.oneOf([ICON_TYPE_SQUARE, ICON_TYPE_LEGEND_UNION_ICON, ICON_TYPE_LEGEND_LINE_ICON]).isRequired,
-    iconColor: _propTypes.default.string.isRequired
-  })),
-  showTwoBars: _propTypes.default.bool,
-  setLimitHeight: _propTypes.default.number,
-  setLimitLow: _propTypes.default.number
-};
-BarChartsByWeeks.defaultProps = {
-  className: '',
-  title: '',
-  showHeaderTopValue: true,
-  headerValueTopTitle: '',
-  headerValueBottomTitle: '',
-  headerValue: 0,
-  HeaderValueCurrencyType: '',
-  HeaderValueIsPercent: false,
-  barChartData: [{
-    title: '202320',
-    value: 542366
-  }, {
-    title: '202321',
-    value: 699511
-  }, {
-    title: '202322',
-    value: 403092
-  }, {
-    title: '202323',
-    value: 396184
-  }, {
-    title: '202324',
-    value: 415317
-  }, {
-    title: '202325',
-    value: 568376
-  }, {
-    title: '202326',
-    value: 1078121
-  }, {
-    title: '202327',
-    value: 347930
-  }, {
-    title: '202328',
-    value: 346258
-  }, {
-    title: '202329',
-    value: 350184
-  }],
-  width: '100%',
-  height: '100%',
-  barChartColor: '#BD9EFF',
-  barChartSecondColor: '#42977A',
-  xselectedColor: '#42977A',
-  tooltipTitle: 'Sales',
-  tooltipSecondTitle: 'Sales 2',
-  startWeekRange: 0,
-  endWeekRange: 0,
-  yAxisCounter: 10,
-  isPercentValue: false,
-  interval: 'preserveEnd',
-  showTitle: true,
-  showLegend: true,
-  isTitleOriganal: false,
-  legendData: [{
-    title: 'Sales',
-    iconType: ICON_TYPE_SQUARE,
-    iconColor: '#90CE9C'
-  }, {
-    title: 'Category Average',
-    iconType: ICON_TYPE_LEGEND_LINE_ICON,
-    iconColor: '#C906FD'
-  }],
-  showTwoBars: false,
-  setLimitHeight: null,
-  setLimitLow: null
-};