sag_components 1.0.108 → 1.0.110

package/dist/stories/components/OneColumnContainer.js

@@ -39,8 +39,8 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    clicked = _useState2[0],
-    setClicked = _useState2[1];
+    hover = _useState2[0],
+    setHover = _useState2[1];
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
     className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
     width: width,
@@ -57,17 +57,8 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
       gridTemplateColumns: gridTemplateColumns
     },
     ref: nodeRef
-  }, children, isLoading && /*#__PURE__*/_react.default.createElement("div", {
-    id: "loadingDiv",
-    style: {
-      marginTop: "20px",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-evenly",
-      alignItems: "center",
-      width: "76%",
-      height: "65%"
-    }
+  }, isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
+    id: "loadingDiv"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
     baseColor: "#EAEAEA"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
@@ -81,9 +72,8 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     width: width.replace("px", "") * 0.76,
     height: 10,
     containerClassName: "avatar-skeleton"
-  }))), !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
+  }))), !isLoading && !hover && children, !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
     id: "InfoTextContainer",
-    clicked: clicked,
     width: width,
     height: height
   }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTitleLabel, {
@@ -93,10 +83,10 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
   }, infoText)), /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
     id: "IconContainer",
     onMouseEnter: function onMouseEnter() {
-      return setClicked(true);
+      return setHover(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setClicked(false);
+      return setHover(false);
     }
   }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, null)))));
 };

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

@@ -4,29 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledContainer = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
+exports.StyledContainer = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  display: flex;\n  position: relative;\n  border-radius: 10px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 });
 exports.StyledContainer = StyledContainer;
-var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Lato\", sans-serif;\n  width: ", ";\n  height: ", ";\n  /* visibility: ", "; */\n  display: ", "; \n  flex-direction: column;\n  justify-content: center;\n  background: white;\n  margin: 0px 30px 0px 30px;\n"])), function (props) {
+var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Lato\", sans-serif;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  background: white;\n  margin: 0px 30px 0px 30px;\n  \n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
-}, function (props) {
-  return props.clicked ? "visible" : "hidden";
-}, function (props) {
-  return props.clicked ? "flex" : "none";
 });
 exports.InfoTextContainer = InfoTextContainer;
-var InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 700;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 1.1em;  \n"])));
+var InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 700;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 1.1em;\n  \n  /* overflow: scroll; */\n\n"])));
 exports.InfoTitleLabel = InfoTitleLabel;
-var InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 0.9em;\n  line-height: 1.4em;\n  font-weight: 500;\n"])));
+var InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 0.9em;\n  line-height: 1.4em;\n  font-weight: 500;\n\n  /* overflow: scroll; */\n"])));
 exports.InfoTextLabel = InfoTextLabel;
 var IconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 15px;\n  height: 15px;\n  position: absolute;\n  margin-top: 10px;\n  margin-right: 10px;\n  top: 0;\n  right: 0;\n"])));
-exports.IconContainer = IconContainer;
+exports.IconContainer = IconContainer;
+var LoadingDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: center;\n  width: 76%;\n  height: 65%;\n"])));
+exports.LoadingDiv = LoadingDiv;

package/dist/stories/components/TotalBenchmark.js

@@ -41,6 +41,9 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
     var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
     return fontRoot;
   };
+  var getSizeFactor = function getSizeFactor() {
+    return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
+  };
   return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
@@ -71,8 +74,11 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
       totalValue: item.totalValue,
       currentValue: item.value,
       benchmarkValue: item.benchmarkValue,
-      height: 14 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
-      width: 115 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
+      height: 12 * getSizeFactor(),
+      width: 85 * getSizeFactor()
+      // height={14 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT)}
+      // width={115 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT)}
+      ,
       color: "#79DB95",
       linearGradientColor: "#C3EFD0",
       linearGradientUnderAvarageColor: "#FDB1B1",

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

@@ -10,7 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 var MIN_HEIGHT = 300;
 var MIN_WIDTH = 260;
-var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
+var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background: #ffffff;\n"])), function (props) {
   return props.rootFont;
 }, function (props) {
   return props.textColor;
@@ -20,7 +20,7 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
   return props.height;
 });
 exports.ControlsContainer = ControlsContainer;
-var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  width: 90%;\n  height: 40%;\n  justify-content: center;\n  align-items: center;\n  background: #ffffff;\n"])));
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  width: 90%;\n  height: 42%;\n  justify-content: center;\n  align-items: center;\n  background: #ffffff;\n"])));
 exports.Controls = Controls;
 var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
 exports.TitleAndValueContainer = TitleAndValueContainer;

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

@@ -30,7 +30,7 @@ var FormattedValue = _styledComponents.default.div(_templateObject6 || (_templat
 exports.FormattedValue = FormattedValue;
 var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.7em;\n  /* width: 5.35em; */\n"])));
 exports.BenchmarkContainer = BenchmarkContainer;
-var AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14em;\n  height: 46%;\n\n"])));
+var AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14em;\n  height: 48%;\n\n"])));
 exports.AreaChartContainer = AreaChartContainer;
 var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  text-align: center;\n"])));
 exports.BottomDetailsRowContainer = BottomDetailsRowContainer;

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

@@ -8,7 +8,7 @@ exports.ValueAndBenchmarkContainer = exports.TitleAndValueContainer = exports.Ti
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
+var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  font-size: ", ";\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n  align-content: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background: #ffffff;\n"])), function (props) {
   return props.rootFont;
 }, function (props) {
   return props.textColor;

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

@@ -20,7 +20,7 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
 exports.ControlsContainer = ControlsContainer;
 var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  width:100%;\n  height:100%;\n  background: #ffffff;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;  \n"])));
 exports.Controls = Controls;
-var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 90%;\n  margin-top: 10%;\n"])));
+var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 90%;\n  margin-top: 12%;\n"])));
 exports.TitleAndValueContainer = TitleAndValueContainer;
 var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;  \n  height: 100%; \n  font-weight: 600;\n  font-size: 1em;\n"])));
 exports.Title = Title;

package/package.json

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