sag_components 1.0.25 → 1.0.27

package/dist/stories/TotalDoughnutChart.stories.js

@@ -21,7 +21,7 @@ var arrLegendDat3rows = [{
   value: 30000,
   color: "#85A1D2"
 }, {
-  name: "Redemption Cost",
+  name: "Existing Redeemers",
   value: 6500,
   color: "#9AE6FF"
 }, {
@@ -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,17 +28,25 @@ 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: 90px;\n  height: 90px;\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) {
+var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 8px;\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: 150px;\n  height: 18px;\n  left: 30px;\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"])));
+var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 11px;\n  height: 19px;\n  left: 30px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
 exports.LegendCurrencySign = LegendCurrencySign;
-var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100px;\n  height: 19px;\n  left: 52px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
+var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 120px;\n  height: 19px;\n  left: 40px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
 exports.LegendFormattedValue = LegendFormattedValue;

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,26 +72,90 @@ 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, {
-    width: 93,
-    height: 93,
+  }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, {
+    left: getDoughnutChartLeft(),
+    top: getDoughnutChartTop()
+  }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
+    width: 90,
+    height: 90,
     onMouseEnter: onPieEnterHandler
   }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
     data: legendData,
-    innerRadius: 32,
-    outerRadius: 47,
+    innerRadius: 30,
+    outerRadius: 45,
     fill: "#8884d8",
     dataKey: "value"
   }, legendData.map(function (row, index) {

package/package.json

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

package/src/stories/TotalDoughnutChart.stories.js

@@ -8,7 +8,7 @@ const arrLegendData = [
 
 const arrLegendDat3rows = [
   { name: "Package Cost", value: 30000, color: "#85A1D2"},
-  { name: "Redemption Cost", value: 6500,color: "#9AE6FF"},
+  { name: "Existing Redeemers", value: 6500,color: "#9AE6FF"},
   { name: "Others", value: 20000, color: "#FD5959"},
   // { name: "My test 2", value: 35000, color: "#79DB95"},
 ];
@@ -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

@@ -71,20 +71,28 @@ export const FormattedValue = styled.div`
 
 export const DoughnutChart = styled.div`
   position: absolute;
-  width: 95px;
-  height: 95px;
-  left: 40px;
-  top: 221px;
+  width: 90px;
+  height: 90px;
+  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;
 `;
@@ -93,16 +101,16 @@ export const LegendColorRectangle = styled.div`
   position: absolute;
   width: 16px;
   height: 16px;
-  left: 14px;
+  left: 8px;
   top: 14px;
   background: ${(props) => props.color};
 `;
 
 export const LegendTitle = styled.div`
   position: absolute;
-  width: 120px;
+  width: 150px;
   height: 18px;
-  left: 40px;
+  left: 30px;
   top: 1px;
   font-weight: 400;
   font-size: 14px;
@@ -114,7 +122,7 @@ export const LegendCurrencySign = styled.div`
   position: absolute;
   width: 11px;
   height: 19px;
-  left: 42px;
+  left: 30px;
   top: 21px;
   font-weight: 600;
   font-size: 16px;
@@ -124,9 +132,9 @@ export const LegendCurrencySign = styled.div`
 
 export const LegendFormattedValue = styled.div`
   position: absolute;
-  width: 100px;
+  width: 120px;
   height: 19px;
-  left: 52px;
+  left: 40px;
   top: 21px;
   font-weight: 600;
   font-size: 16px;

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,16 +147,18 @@ export const TotalDoughnutChart = ({
           </LegendControls>
         ))}
 
-        <DoughnutChart>
+        <DoughnutChart 
+            left={getDoughnutChartLeft() }
+            top={getDoughnutChartTop()}>
           <SourcePieChart
-            width={93}
-            height={93}
+            width={90}
+            height={90}
             onMouseEnter={onPieEnterHandler}
           >
             <Pie
               data={legendData}
-              innerRadius={32}
-              outerRadius={47}
+              innerRadius={30}
+              outerRadius={45}
               fill="#8884d8"
               dataKey="value"
             >
@@ -124,7 +167,7 @@ export const TotalDoughnutChart = ({
               ))}
             </Pie>
 
-            <Tooltip/>
+            <Tooltip />
           </SourcePieChart>
         </DoughnutChart>
       </Controls>