sag_components 1.0.968 → 1.0.970

package/dist/stories/components/TotalHorizontalCharts.js

@@ -12,10 +12,11 @@ var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
 var _CommonFunctions = require("./CommonFunctions");
 var _TotalHorizontalCharts = require("./TotalHorizontalCharts.style");
-/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable no-shadow */
-/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
 
 const TotalHorizontalCharts = props => {
   const {
@@ -29,6 +30,7 @@ const TotalHorizontalCharts = props => {
     labelLimitedLetters,
     width,
     height,
+    barsMargin,
     rightGap,
     textColor,
     noDataText,
@@ -39,21 +41,32 @@ const TotalHorizontalCharts = props => {
     className
   } = props;
   const barBackgrounds = chartsData.map(bg => bg.color);
-  const [widthChartContainer, setWidthChartContainer] = (0, _react.useState)(0);
-  const [heightChartContainer, setHeightChartContainer] = (0, _react.useState)(0);
-  const chartContainerRef = (0, _react.useRef)();
+  const topHeader = (0, _react.useRef)();
+  const wrapper = (0, _react.useRef)();
+  const [chartHeight, setChartHeight] = (0, _react.useState)('100%');
+  const calcHeight = () => {
+    if (wrapper.current && topHeader.current) {
+      const availableHeight = Math.max(wrapper.current.clientHeight - topHeader.current.clientHeight, 0);
+      return availableHeight / wrapper.current.clientHeight * 100;
+    }
+    return 100;
+  };
+  const updateChartHeight = () => {
+    setChartHeight(`${calcHeight()}%`);
+  };
+  (0, _react.useEffect)(() => {
+    updateChartHeight();
+    window.addEventListener('resize', updateChartHeight);
+    return () => {
+      window.removeEventListener('resize', updateChartHeight);
+    };
+  }, []);
   const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
   const [tooltipText, setTooltipText] = (0, _react.useState)({
     content: '',
     clientX: 0,
     clientY: 0
   });
-  (0, _react.useEffect)(() => {
-    if (chartContainerRef.current) {
-      setWidthChartContainer(chartContainerRef.current.clientWidth);
-      setHeightChartContainer(chartContainerRef.current.clientHeight);
-    }
-  }, [width, height]);
   const CustomizedLabel = props => showPercentAsideValue ? /*#__PURE__*/_react.default.createElement("text", {
     x: props.x + (props.width <= 0 ? -12 : props.width) + 56,
     y: props.y + 4,
@@ -127,29 +140,27 @@ const TotalHorizontalCharts = props => {
     return null;
   };
   return /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ControlsContainer, {
+    ref: wrapper,
     height: height,
     width: width,
     textColor: textColor,
     className: className
-  }, (chartsData === null || chartsData === void 0 ? void 0 : chartsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TitleAndValueContainer, {
-    id: "TitleAndValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Header, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.FormattedValue, {
-    id: "FormattedValue"
-  }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
-    id: "CurrencySign"
-  }, 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(_TotalHorizontalCharts.ChartWrapper, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ChartInner, {
-    ref: chartContainerRef
-  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
-    height: heightChartContainer - 10,
-    width: widthChartContainer
+  }, (chartsData === null || chartsData === void 0 ? void 0 : chartsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CardHeader, {
+    ref: topHeader,
+    className: "CardHeader"
+  }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalValue, {
+    className: "TotalValue"
+  }, currencySign && /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
+    className: "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(_recharts.ResponsiveContainer, {
+    height: chartHeight
   }, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
-    width: widthChartContainer * 0.4,
     layout: "vertical",
     data: chartsData,
     margin: {
       top: 10,
       right: 20,
-      bottom: 50,
+      bottom: barsMargin,
       left: 10
     }
   }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
@@ -160,13 +171,11 @@ const TotalHorizontalCharts = props => {
   }), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
     dataKey: "name",
     type: "category",
-    width: widthChartContainer * 0.3,
+    width: labelLimitedLetters * 10,
     tickLine: false,
+    axisLine: false,
     interval: 0,
     allowDataOverflow: true,
-    axisLine: false
-    // tick={{ fontSize: 12 }}
-    ,
     tick: CustomizedTickBarChart
   }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
     dataKey: "value",
@@ -191,7 +200,7 @@ const TotalHorizontalCharts = props => {
     style: {
       pointerEvents: 'none'
     }
-  })))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  })))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
@@ -205,14 +214,15 @@ TotalHorizontalCharts.defaultProps = {
   currencySign: false,
   currencyType: 'USD',
   chartsData: [],
+  showPercentAsideValue: false,
   labelFontSize: 10,
   labelLimitedLetters: 12,
   width: '100%',
   height: '100%',
-  rightGap: 1.25,
+  barsMargin: 0,
+  rightGap: 1,
   textColor: '#212121',
   noDataText: 'No Data',
-  showPercentAsideValue: false,
   isDollar: true,
   isPercentage: false,
   showDollarSign: true

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

@@ -4,73 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleAndValueContainer = exports.Title = exports.OutBanner = exports.Header = exports.FormattedValue = exports.CurrencySign = exports.ControlsContainer = exports.ChartWrapper = exports.ChartInner = void 0;
+exports.TotalValue = exports.Title = exports.CurrencySign = exports.ControlsContainer = exports.CardHeader = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const scrollableStyles = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-
-  &::-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;
+  position: relative;
+  background-color: white;
   color: ${props => props.textColor};
   width: ${props => props.width};
   height: ${props => props.height};
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  // justify-content: center;
-  .top {
-    text-align: center;
-    white-space: normal;
-    &:before {
-      display: none;
-    }
-  }
-`;
-const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div`
-  flex-grow: 1;
-  width: 100%;
-  ${scrollableStyles}
-  overflow-x: hidden;
-`;
-const ChartInner = exports.ChartInner = _styledComponents.default.div`
-  min-height: 120%;
-  width: 100%;
 `;
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
+const CardHeader = exports.CardHeader = _styledComponents.default.div`
   padding: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: white;
 `;
-const Header = exports.Header = _styledComponents.default.div``;
-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 FormattedValue = exports.FormattedValue = _styledComponents.default.div`
+const TotalValue = exports.TotalValue = _styledComponents.default.div`
   font-weight: 500;
   font-size: 40px;
   display: flex;
@@ -83,31 +34,16 @@ const FormattedValue = exports.FormattedValue = _styledComponents.default.div`
     font-size: 20px;
   }
 `;
-const OutBanner = exports.OutBanner = _styledComponents.default.div`
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-  font-size: 14px;
+const Title = exports.Title = _styledComponents.default.h4`
+  font-size: 18px;
   font-weight: 400;
-  color: ${props => props.textColor};
-  cursor: pointer;
+  line-height: 1;
+  margin: 0 0 8px;
   @media (max-width: 1536px) {
-    font-size: 10px;
+    font-size: 14px;
   }
   @media (max-width: 1366px) {
-    font-size: 8px;
-  }
-  > svg {
-    width: 14px;
-    height: 14px;
-    @media (max-width: 1536px) {
-      width: 12px;
-      height: 12px;
-    }
-    @media (max-width: 1366px) {
-      width: 8px;
-      height: 8px;
-    }
+    font-size: 12px;
   }
 `;
 const CurrencySign = exports.CurrencySign = _styledComponents.default.span`