sag_components 1.0.24 → 1.0.26

package/dist/stories/TotalDoughnutChart.stories.js

@@ -117,8 +117,8 @@ TotalCost.args = {
   currency: true,
   currencyType: "USD",
   legendData: arrLegendData,
-  width: 336,
-  height: 374,
+  width: 260,
+  height: 350,
   textColor: "#212121"
 };
 var TotalCost3rows = Template.bind({});
@@ -130,7 +130,7 @@ TotalCost3rows.args = {
   currency: true,
   currencyType: "USD",
   legendData: arrLegendDat3rows,
-  width: 336,
-  height: 374,
+  width: 260,
+  height: 350,
   textColor: "#212121"
 };

package/dist/stories/TotalDoughnutChart.style.js

@@ -28,15 +28,23 @@ var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateO
 exports.CurrencySign = CurrencySign;
 var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 200px;\n  height: 48px;\n  left: 57px;\n  top: 115px;\n  font-weight: 500;\n  font-size: 40px;\n  line-height: 48px;\n  //border: 1px solid red;\n"])));
 exports.FormattedValue = FormattedValue;
-var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 95px;\n  height: 95px;\n  left: 40px;\n  top: 221px;\n  //border: 1px solid red;\n"])));
+var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 95px;\n  height: 95px;\n  left: ", ";\n  top: ", ";     \n  //border: 1px solid red;\n"])), function (props) {
+  return props.left.toString().concat("", "px"); //10px
+}, function (props) {
+  return props.top.toString().concat("", "px"); //top: 221px;
+});
 exports.DoughnutChart = DoughnutChart;
-var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 12px;\n  width: 180px;\n  height: 47px;\n  left: 150px;\n  top: 221px;  \n  background: #ffffff;\n  //border: 1px solid blue;\n"])));
+var LegendControls = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 12px;\n  width: 150px;\n  height: 47px;  \n  left: ", ";\n  top: ", ";    \n  background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
+  return props.left.toString().concat("", "px"); //100px
+}, function (props) {
+  return props.top.toString().concat("", "px"); //top: 221px;
+});
 exports.LegendControls = LegendControls;
 var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 14px;\n  top: 14px;\n  background: ", ";\n"])), function (props) {
   return props.color;
 });
 exports.LegendColorRectangle = LegendColorRectangle;
-var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 120px;\n  height: 18px;\n  left: 40px;\n  top: 1px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  //border: 1px solid red;\n"])));
+var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 110px;\n  height: 18px;\n  left: 40px;\n  top: 1px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  //border: 1px solid red;\n"])));
 exports.LegendTitle = LegendTitle;
 var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 11px;\n  height: 19px;\n  left: 42px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
 exports.LegendCurrencySign = LegendCurrencySign;

package/dist/stories/components/OneColumnContainer.js

@@ -13,7 +13,7 @@ var _OneColumnContainer = require("../OneColumnContainer.style");
 var _InfoIcon = require("./InfoIcon");
 var _core = require("@dnd-kit/core");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["children", "nodeRef", "itemClass", "overStyle", "draggingStyle", "droppedStyle", "refId", "width", "height", "infoText"];
+var _excluded = ["children", "nodeRef", "itemClass", "divStyle", "overStyle", "draggingStyle", "droppedStyle", "refId", "width", "height", "infoText"];
 /**
  * Primary UI component for user interaction
  */
@@ -21,6 +21,7 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
   var children = _ref.children,
     nodeRef = _ref.nodeRef,
     itemClass = _ref.itemClass,
+    divStyle = _ref.divStyle,
     overStyle = _ref.overStyle,
     draggingStyle = _ref.draggingStyle,
     droppedStyle = _ref.droppedStyle,
@@ -41,13 +42,8 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     width: width,
     height: height
   }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: nodeRef,
-    style: {
-      width: "100%",
-      height: "100%",
-      display: "grid",
-      gridTemplateColumns: "repeat(2, 1fr)"
-    }
+    className: (0, _classnames.default)(divStyle),
+    ref: nodeRef
   }, children, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
     clicked: clicked,
     width: width,

package/dist/stories/components/TotalDoughnutChart.js

@@ -24,12 +24,14 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
     currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
     legendData = _ref.legendData,
     _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 336 : _ref$width,
+    width = _ref$width === void 0 ? 260 : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 374 : _ref$height,
+    height = _ref$height === void 0 ? 350 : _ref$height,
     _ref$textColor = _ref.textColor,
     textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var MIN_WIDTH = 260;
+  var MIN_HEIGHT = 300;
   var getCurrencySign = function getCurrencySign(currencyTypeToConvert) {
     if (!currencyTypeToConvert) return "";
     var currencySign = "";
@@ -70,19 +72,83 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
     while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
     return x;
   };
+  var getDoughnutChartLeft = function getDoughnutChartLeft() {
+    if (width <= 260) {
+      return 10;
+    }
+    ;
+    if (width >= 290) {
+      return 40;
+    }
+    ;
+    return 10 + (width - MIN_WIDTH);
+  };
+  var getLegendControlsLeft = function getLegendControlsLeft() {
+    if (width <= 260) {
+      return 100;
+    }
+    ;
+    if (width >= 300) {
+      return 140;
+    }
+    ;
+    return 100 + (width - MIN_WIDTH);
+  };
+  var getDoughnutChartTop = function getDoughnutChartTop() {
+    if (height <= 300) {
+      return 180;
+    }
+    ;
+    if (height >= 340) {
+      return 220;
+    }
+    ;
+    return 180 + (height - MIN_HEIGHT);
+  };
+  var getLegendControlsTop = function getLegendControlsTop() {
+    if (height <= 300) {
+      return 180;
+    }
+    ;
+    if (height >= 340) {
+      return 220;
+    }
+    ;
+    return 180 + (height - MIN_HEIGHT);
+  };
+  var getControlsLeft = function getControlsLeft() {
+    if (width - MIN_WIDTH <= 0) {
+      return MIN_WIDTH;
+    }
+    ;
+    return width;
+  };
+  var getControlsTop = function getControlsTop() {
+    if (height - MIN_HEIGHT <= 0) {
+      return MIN_HEIGHT;
+    }
+    ;
+    return height;
+  };
   var onPieEnterHandler = function onPieEnterHandler() {};
   return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
-    height: height,
-    width: width,
+    height: getControlsTop(),
+    width: getControlsLeft(),
     textColor: textColor
   }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
     height: height,
-    width: width
+    width: getControlsLeft
   }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, null, "".concat(dotCut ? getFormattedValue(value) : getNumberWithCommas(value)), "".concat(dotCut ? getFormattedUnits(value) : "")), legendData.map(function (row, index) {
-    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControls, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
+    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControls, {
+      left: getLegendControlsLeft(),
+      top: getLegendControlsTop()
+    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
       color: row.color
     }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, null, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, null, "".concat(currency ? getCurrencySign(currencyType) : "")), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, null, "".concat(dotCut ? getFormattedValue(row.value) : getNumberWithCommas(row.value)), "".concat(dotCut ? getFormattedUnits(row.value) : "")));
-  }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
+  }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, {
+    left: getDoughnutChartLeft(),
+    top: getDoughnutChartTop()
+  }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
     width: 93,
     height: 93,
     onMouseEnter: onPieEnterHandler

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/stories/TotalDoughnutChart.stories.js

@@ -92,8 +92,8 @@ TotalCost.args = {
     currency: true,
     currencyType: "USD",
     legendData: arrLegendData,
-    width: 336,
-    height: 374,
+    width: 260,
+    height: 350,
     textColor: "#212121",
 };
 
@@ -106,7 +106,7 @@ TotalCost3rows.args = {
     currency: true,
     currencyType: "USD",
     legendData: arrLegendDat3rows,
-    width: 336,
-    height: 374,
+    width: 260,
+    height: 350,
     textColor: "#212121",
 };

package/src/stories/TotalDoughnutChart.style.js

@@ -73,18 +73,26 @@ export const DoughnutChart = styled.div`
   position: absolute;
   width: 95px;
   height: 95px;
-  left: 40px;
-  top: 221px;
+  left: ${(props) => {       
+    return props.left.toString().concat("", "px"); //10px
+  }};
+  top: ${(props) => {       
+    return props.top.toString().concat("", "px"); //top: 221px;
+  }};     
   //border: 1px solid red;
 `;
 
 export const LegendControls = styled.div`
   position: relative;
   border-radius: 12px;
-  width: 180px;
-  height: 47px;
-  left: 150px;
-  top: 221px;  
+  width: 150px;
+  height: 47px;  
+  left: ${(props) => {       
+    return props.left.toString().concat("", "px"); //100px
+  }};
+  top: ${(props) => {       
+    return props.top.toString().concat("", "px"); //top: 221px;
+  }};    
   background: #ffffff;
   //border: 1px solid blue;
 `;
@@ -100,7 +108,7 @@ export const LegendColorRectangle = styled.div`
 
 export const LegendTitle = styled.div`
   position: absolute;
-  width: 120px;
+  width: 110px;
   height: 18px;
   left: 40px;
   top: 1px;

package/src/stories/components/OneColumnContainer.jsx

@@ -7,7 +7,7 @@ import classNames from "classnames";
 /**
  * Primary UI component for user interaction
  */
-export const OneColumnContainer = ({ children,nodeRef,itemClass,overStyle,draggingStyle,droppedStyle,refId,width,height,infoText,...props }) => {
+export const OneColumnContainer = ({ children,nodeRef,itemClass,divStyle,overStyle,draggingStyle,droppedStyle,refId,width,height,infoText,...props }) => {
   const [clicked, setClicked] = useState(false);
   const onInfoClick = ()=>{
     setClicked(!clicked)
@@ -21,13 +21,7 @@ export const OneColumnContainer = ({ children,nodeRef,itemClass,overStyle,draggi
       draggingStyle,
       children && droppedStyle
     )} width={width} height={height}>
-        <div ref={nodeRef} style={{
-          
-      width: "100%",
-      height: "100%",
-      display: "grid",
-      gridTemplateColumns: "repeat(2, 1fr)"
-    }}>
+        <div className={classNames(divStyle)} ref={nodeRef} >
       {children}
       <InfoTextContainer clicked={clicked} width={width} height={height}>
         <InfoTextLabel>{infoText}</InfoTextLabel>

package/src/stories/components/TotalDoughnutChart.jsx

@@ -24,11 +24,14 @@ export const TotalDoughnutChart = ({
   currency = true,
   currencyType = "USD",
   legendData,
-  width = 336,
-  height = 374,
+  width = 260,
+  height = 350,
   textColor = "black",
   ...props
 }) => {
+  const MIN_WIDTH = 260;
+  const MIN_HEIGHT = 300;
+
   const getCurrencySign = (currencyTypeToConvert) => {
     if (!currencyTypeToConvert) return "";
     let currencySign = "";
@@ -73,11 +76,46 @@ export const TotalDoughnutChart = ({
     return x;
   };
 
+  const getDoughnutChartLeft = () => {
+    if( width <= 260) { return 10};
+    if( width >= 290) { return 40};
+    return 10 + (width - MIN_WIDTH) ;   
+  };
+
+    const getLegendControlsLeft = () => {   
+    if( width <= 260) { return 100};
+    if( width >= 300) { return 140};
+    return 100 + (width - MIN_WIDTH)  ;   
+  };
+    
+  const getDoughnutChartTop = () => {
+    if( height <= 300) { return 180};
+    if( height >= 340) { return 220};
+    return 180 + (height - MIN_HEIGHT)  ;   
+  };
+  
+  const getLegendControlsTop = () => {   
+    if( height <= 300) { return 180};
+    if( height >= 340) { return 220};
+    return 180 + (height - MIN_HEIGHT)  ;   
+  };
+
+    
+  const getControlsLeft = () => {   
+    if( (width - MIN_WIDTH)<= 0) { return MIN_WIDTH};    
+    return width ;   
+  };
+  
+  const getControlsTop = () => {   
+    if( (height - MIN_HEIGHT)<= 0) { return MIN_HEIGHT};    
+    return height ;   
+  };
+
   const onPieEnterHandler = () => {};
 
   return (
-    <ControlsContainer height={height} width={width} textColor={textColor}>
-      <Controls height={height} width={width}>
+    <ControlsContainer height={getControlsTop()} width={getControlsLeft()} textColor={textColor}>
+      <Controls height={height} width={getControlsLeft}>
         <Title>{title}</Title>
 
         <CurrencySign>
@@ -89,7 +127,10 @@ export const TotalDoughnutChart = ({
         </FormattedValue>
 
         {legendData.map((row, index) => (
-          <LegendControls>
+          <LegendControls
+            left={getLegendControlsLeft()}
+            top={getLegendControlsTop()}
+          >
             <LegendColorRectangle color={row.color}></LegendColorRectangle>
             <LegendTitle>{row.name}</LegendTitle>
             <LegendCurrencySign>
@@ -106,7 +147,9 @@ export const TotalDoughnutChart = ({
           </LegendControls>
         ))}
 
-        <DoughnutChart>
+        <DoughnutChart 
+            left={getDoughnutChartLeft() }
+            top={getDoughnutChartTop()}>
           <SourcePieChart
             width={93}
             height={93}
@@ -124,7 +167,7 @@ export const TotalDoughnutChart = ({
               ))}
             </Pie>
 
-            <Tooltip/>
+            <Tooltip />
           </SourcePieChart>
         </DoughnutChart>
       </Controls>