sag_components 1.0.249 → 1.0.250

package/dist/stories/components/TotalBenchmarkAreachart.js

@@ -124,19 +124,19 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
     return /*#__PURE__*/_react.default.createElement("g", {
       transform: "translate(".concat(x, ",").concat(y, ")")
     }, activeLabel === payload.value && /*#__PURE__*/_react.default.createElement("rect", {
-      x: -15,
+      x: -10,
       y: 0,
-      width: "40",
+      width: "26",
       height: "18",
       rx: 9,
       fill: xselectedColor,
-      fillOpacity: "0.30"
+      fillOpacity: "0.10"
     }), /*#__PURE__*/_react.default.createElement("text", {
       x: 0,
-      y: 14,
-      dx: -10,
+      y: 13,
+      dx: -5,
       fill: "black",
-      fontSize: "14px"
+      fontSize: "8px"
     }, payload.value));
   };
   var CustomTooltip = function CustomTooltip(_ref3) {
@@ -157,7 +157,7 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
     textColor: textColor,
     ref: controlsContainerRef,
     rootFont: rootFont
-  }, areaChartData && (areaChartData === null || areaChartData === void 0 ? void 0 : areaChartData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Controls, {
+  }, (areaChartData === null || areaChartData === void 0 ? void 0 : areaChartData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Controls, {
     id: "Controls"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.TitleAndValueContainer, {
     id: "TitleAndValueContainer"
@@ -165,15 +165,15 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
     id: "Title"
   }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ValueAndBenchmarkContainer, {
     id: "ValueAndBenchmarkContainer"
-  }, value != undefined && value != null ? getArrowSign(arrowSign) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.FormattedValue, {
+  }, getArrowSign(arrowSign), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.FormattedValue, {
     id: "FormattedValue"
-  }, value != undefined && value != null ? "".concat(value, " %") : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.FormattedValueNoDataMessage, null, value === undefined || value === null ? "No Data" : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.BenchmarkContainer, {
+  }, value, "%"), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.BenchmarkContainer, {
     id: "BenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
     id: "Benchmark",
-    totalValue: benchmarkTotalValue !== null && benchmarkTotalValue !== void 0 ? benchmarkTotalValue : 0,
-    currentValue: value !== null && value !== void 0 ? value : 0,
-    benchmarkValue: benchmarkValue !== null && benchmarkValue !== void 0 ? benchmarkValue : 0,
+    totalValue: benchmarkTotalValue,
+    currentValue: value,
+    benchmarkValue: benchmarkValue,
     height: 12 * getSizeFactor(),
     width: 85 * getSizeFactor(),
     color: "#79DB95",
@@ -193,9 +193,9 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
     data: areaChartData,
     margin: {
       top: 0,
-      right: 24,
-      bottom: -5,
-      left: 24
+      right: 20,
+      bottom: 0,
+      left: 20
     }
   }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
     strokeDasharray: "3 3",

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

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
+exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
 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, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", 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\n"])), function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", 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  /* min-height: 280px;\n  min-width: 250px;\n  max-height: 380px;\n  max-width: 350px; */\n"])), function (props) {
   return props.rootFont;
 }, function (props) {
   return props.textColor;
@@ -24,25 +24,23 @@ var TooltipLabel = _styledComponents.default.div(_templateObject3 || (_templateO
 exports.TooltipLabel = TooltipLabel;
 var TooltipTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n"])));
 exports.TooltipTitle = TooltipTitle;
-var Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  background: #ffffff;\n  justify-content: center;\n  flex-direction: column;\n  flex-basis: 100%;\n\n  justify-content: space-between;\n  width: 100%;\n\n"])));
+var Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border-radius: 12px;\n  background: #ffffff;\n  justify-content: center;\n  flex-direction: column;\n  flex-basis: 100%;\n  padding: 0 16px;\n  justify-content: space-between;\n  width: 90%;\n  /* min-height: 280px;\n  min-width: 250px;\n  max-height: 380px;\n  max-width: 350px; */\n"])));
 exports.Controls = Controls;
-var TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 1rem;\n"])));
+var TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TitleAndValueContainer = TitleAndValueContainer;
-var Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n\n"])));
+var Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 1rem;\n  margin-left: 0.5rem;\n  /* margin-top: 1rem; */\n  margin-bottom: 1rem;\n"])));
 exports.Title = Title;
-var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: baseline;\n\n"])));
+var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: baseline;\n  margin-left: 0.5rem;\n"])));
 exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
 var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 1.2rem;\n  align-items: flex-end;\n"])));
 exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
-var FormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
+var FormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.2rem;\n"])));
 exports.FormattedValue = FormattedValue;
-var FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 0.88889rem;\n  margin: 0;  \n"])));
-exports.FormattedValueNoDataMessage = FormattedValueNoDataMessage;
-var BenchmarkContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 1.5rem;\n"])));
+var BenchmarkContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 1rem;\n  /* width: 5.35rem; */\n"])));
 exports.BenchmarkContainer = BenchmarkContainer;
-var AreaChartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\n  width: 100%;\n  height: 50%;\n"])));
+var AreaChartContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 51%;\n"])));
 exports.AreaChartContainer = AreaChartContainer;
-var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  text-align: center;\n"])));
+var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  text-align: center;\n"])));
 exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
-var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.77778rem;\n"])));
+var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.7rem;\n"])));
 exports.BottomDetailsRowTitle = BottomDetailsRowTitle;

package/dist/stories/components/TotalBenchmarkArrows.js

@@ -104,12 +104,12 @@ var TotalBenchmarkArrows = function TotalBenchmarkArrows(_ref) {
     id: "ValueAndBenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.FormattedValue, {
     id: "FormattedValue"
-  }, value != undefined && value != null && dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), value != undefined && value != null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.BenchmarkContainer, {
+  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.BenchmarkContainer, {
     id: "BenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
     totalValue: benchmarkTotalValue,
-    currentValue: value !== null && value !== void 0 ? value : 0,
-    benchmarkValue: benchmarkValue !== null && benchmarkValue !== void 0 ? benchmarkValue : 0,
+    currentValue: value,
+    benchmarkValue: benchmarkValue,
     height: 12 * getSizeFactor(),
     width: 85 * getSizeFactor(),
     color: "#79DB95",
@@ -121,16 +121,14 @@ var TotalBenchmarkArrows = function TotalBenchmarkArrows(_ref) {
     id: "DetailsContainer"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsTitle, {
     id: "DetailsTitle"
-  }, detailsTitle), detailsData.map(function (item) {
+  }, detailsTitle), detailsData.map(function (item, index) {
     return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowContainer, {
       id: "DetailsRowContainer"
-    }, item.value != undefined && item.value != null ? getArrowSign(item.value >= 0 ? "up" : "down") : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowFormattedValue, {
+    }, getArrowSign(item.value >= 0 ? "up" : "down"), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowFormattedValue, {
       id: "DetailsRowFormattedValue"
-    }, item.value != undefined && item.value != null ? Math.abs(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowPercentSign, {
+    }, item.value ? Math.abs(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowPercentSign, {
       id: "DetailsRowPercentSign"
-    }, item.value != undefined && item.value != null ? " % " : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowFormattedValueNoDataMessage, {
-      id: "DetailsRowFormattedValueNoDataMessage"
-    }, item.value === undefined || item.value === null ? "No Data" : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowTitle, {
+    }, " ", "%", " "), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkArrowsStyle.DetailsRowTitle, {
       id: "DetailsRowTitle"
     }, item.title));
   }))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {

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

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.DetailsTitle = exports.DetailsRowTitle = exports.DetailsRowPercentSign = exports.DetailsRowFormattedValueNoDataMessage = exports.DetailsRowFormattedValue = exports.DetailsRowContainer = exports.DetailsRowArrowContainer = exports.DetailsContainer = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = void 0;
+exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.DetailsTitle = exports.DetailsRowTitle = exports.DetailsRowPercentSign = exports.DetailsRowFormattedValue = exports.DetailsRowContainer = exports.DetailsRowArrowContainer = exports.DetailsContainer = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = void 0;
 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, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", 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) {
   return props.rootFont;
 }, function (props) {
@@ -20,27 +20,25 @@ 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: 90%;\n  height: 100%;\n  background: #ffffff;  \n  flex-direction: column;\n  flex-basis: 100%;\n  //align-items: center;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0px 0.8rem;\n  \n"])));
 exports.Controls = Controls;
-var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([" \n  font-weight: 500;\n  font-size: 1rem;\n  // margin-bottom: 1rem;\n"])));
+var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 14rem; */\n  font-weight: 600;\n  font-size: 1rem;\n   margin-bottom: 1rem;\n"])));
 exports.Title = Title;
-var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: baseline;\n  height: 45%;\n"])));
+var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: baseline;\n  /* width: 14rem; */\n  height: 45%;\n"])));
 exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
-var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
+var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.2rem;\n"])));
 exports.FormattedValue = FormattedValue;
-var BenchmarkContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.77778rem;\n  width: 5.35rem;\n"])));
+var BenchmarkContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.7rem;\n  width: 5.35rem;\n"])));
 exports.BenchmarkContainer = BenchmarkContainer;
 var DetailsContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 14rem; */\n  height: 50%;\n"])));
 exports.DetailsContainer = DetailsContainer;
-var DetailsTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  height: 25%;\n  font-weight: 500;\n  font-size: 1rem;\n"])));
+var DetailsTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 14rem; */\n  height: 25%;\n  font-weight: 600;\n  font-size: 1rem;\n"])));
 exports.DetailsTitle = DetailsTitle;
 var DetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  text-align: center;\n  align-items: baseline;\n  height: 25%;\n"])));
 exports.DetailsRowContainer = DetailsRowContainer;
 var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 0.8rem;\n  align-items: flex-end;\n  height: 25%;\n"])));
 exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
-var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 0.88889rem;\n"])));
+var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 600;\n  font-size: 0.88rem;\n"])));
 exports.DetailsRowFormattedValue = DetailsRowFormattedValue;
-var DetailsRowFormattedValueNoDataMessage = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 0.88889rem;\n  margin: 0;  \n"])));
-exports.DetailsRowFormattedValueNoDataMessage = DetailsRowFormattedValueNoDataMessage;
-var DetailsRowPercentSign = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 12px;\n"])));
+var DetailsRowPercentSign = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 400;\n  font-size: 0.88rem;\n"])));
 exports.DetailsRowPercentSign = DetailsRowPercentSign;
-var DetailsRowTitle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 400;\n  font-size: 0.88889rem;\n"])));
+var DetailsRowTitle = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 0.3rem;\n  font-weight: 400;\n  font-size: 0.88rem;\n"])));
 exports.DetailsRowTitle = DetailsRowTitle;

package/dist/stories/components/TotalBenchmarkBarchart.js

@@ -17,7 +17,6 @@ var _TotalBenchmarkBarchartStyle = require("./TotalBenchmarkBarchart.style.js");
 var _excluded = ["title", "value", "benchmarkTotalValue", "benchmarkValue", "currency", "currencyType", "barChartData", "dotCut", "width", "height", "textColor", "noDataText"];
 /*TotalBenchmarkBarchart*/
 var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
-  var _getFormattedBarChart, _getFormattedBarChart2;
   var title = _ref.title,
     value = _ref.value,
     benchmarkTotalValue = _ref.benchmarkTotalValue,
@@ -113,15 +112,15 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
   var getFormattedBarChartData = function getFormattedBarChartData() {
     var tempFormattedBarChartData = [];
     var currencySign = currency == true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : "";
-    if (barChartData && (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) === 2) {
+    if (barChartData && barChartData.length === 2) {
       tempFormattedBarChartData.push({
         title1: barChartData[0].title,
         value1: barChartData[0].value,
-        formattedValue1: barChartData[0].value != undefined && barChartData[0].value != null ? currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)) : "No Data",
+        formattedValue1: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)),
         color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
         title2: barChartData[1].title,
         value2: barChartData[1].value,
-        formattedValue2: barChartData[1].value != undefined && barChartData[1].value != null ? currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)) : "No Data",
+        formattedValue2: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)),
         color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
       });
 
@@ -138,7 +137,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
     textColor: textColor,
     ref: controlsContainerRef,
     rootFont: rootFont
-  }, value != undefined && value != null || barChartData && (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) >= 2 && (barChartData[0].value != undefined && barChartData[0].value != null || barChartData[1].value != undefined && barChartData[1].value != null) ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Controls, {
+  }, (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Controls, {
     id: "Controls"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.TitleAndValueContainer, {
     id: "TitleAndValueContainer"
@@ -148,14 +147,14 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
     id: "ValueAndBenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.CurrencySign, {
     id: "CurrencySign"
-  }, value != undefined && value != null && currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.FormattedValue, {
+  }, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.FormattedValue, {
     id: "FormattedValue"
-  }, value != undefined && value != null ? dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value) : "", value != undefined && value != null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.FormattedValueNoDataMessage, null, value === undefined || value === null ? "No Data" : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BenchmarkContainer, {
+  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BenchmarkContainer, {
     id: "BenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
-    totalValue: benchmarkTotalValue !== null && benchmarkTotalValue !== void 0 ? benchmarkTotalValue : 0,
-    currentValue: value !== null && value !== void 0 ? value : 0,
-    benchmarkValue: benchmarkValue !== null && benchmarkValue !== void 0 ? benchmarkValue : 0,
+    totalValue: benchmarkTotalValue,
+    currentValue: value,
+    benchmarkValue: benchmarkValue,
     height: 12 * getSizeFactor(),
     width: 85 * getSizeFactor(),
     color: "#79DB95",
@@ -165,7 +164,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
     backgroundColor: "#F2F2F2"
   })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
     id: "BarchartContainer"
-  }, getFormattedBarChartData() && ((_getFormattedBarChart = getFormattedBarChartData()) === null || _getFormattedBarChart === void 0 ? void 0 : _getFormattedBarChart.length) === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+  }, getFormattedBarChartData().length === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
     width: 224 * getSizeFactor(),
     height: 150 * heightFactor,
     data: getFormattedBarChartData(),
@@ -187,9 +186,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
     dataKey: "formattedValue1",
     position: "top",
-    fill: textColor,
-    fontWeight: 400,
-    fontSize: "14px"
+    fill: textColor
   })), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
     dataKey: "value2",
     fill: getFormattedBarChartData()[0].color2,
@@ -200,10 +197,8 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
     dataKey: "formattedValue2",
     position: "top",
-    fill: textColor,
-    fontWeight: 400,
-    fontSize: "14px"
-  }))), getFormattedBarChartData() && ((_getFormattedBarChart2 = getFormattedBarChartData()) === null || _getFormattedBarChart2 === void 0 ? void 0 : _getFormattedBarChart2.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
+    fill: textColor
+  }))), getFormattedBarChartData().length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
     id: "BottomDetailsRowContainer"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
     id: "BottomDetailsRowTitle1"

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

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValueAndBenchmarkContainer = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.BarchartContainer = void 0;
+exports.ValueAndBenchmarkContainer = exports.TitleAndValueContainer = exports.Title = exports.FormattedValue = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.BarchartContainer = void 0;
 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, _templateObject12;
+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: \"Poppins\", 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) {
@@ -20,23 +20,21 @@ 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  background: #ffffff; \n  justify-content: space-between;\n  flex-direction: column;\n  flex-basis: 100%;\n  //padding: 16px ;\n"])));
 exports.Controls = Controls;
-var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0px;\n"])));
+var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n \n"])));
 exports.TitleAndValueContainer = TitleAndValueContainer;
-var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem; \n  //margin-bottom: 1rem;\n"])));
+var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 1rem; \n  margin-bottom: 1rem;\n"])));
 exports.Title = Title;
 var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: baseline;   \n\n"])));
 exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
 var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["  \n  font-weight: 500;\n  font-size: 1rem;\n"])));
 exports.CurrencySign = CurrencySign;
-var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
+var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.2rem;\n"])));
 exports.FormattedValue = FormattedValue;
-var FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 0.88889rem;\n  margin: 0;  \n"])));
-exports.FormattedValueNoDataMessage = FormattedValueNoDataMessage;
-var BenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.7em;\n  width: 5.35em;\n"])));
+var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.7em;\n  width: 5.35em;\n"])));
 exports.BenchmarkContainer = BenchmarkContainer;
-var BarchartContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14em;\n\n"])));
+var BarchartContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14em;\n"])));
 exports.BarchartContainer = BarchartContainer;
-var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  text-align: center;  \n  //max-height: 20px;\n"])));
+var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  text-align: center;  \n\n"])));
 exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
-var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center; \n  margin-top: 4px;\n  width: 14em;\n  font-weight: 400;\n  font-size: 14px;\n  max-height: 20px;\n"])));
+var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center; \n  margin-top: 0.2em;\n  width: 14em;\n  font-weight: 400;\n  font-size: 0.7rem;\n"])));
 exports.BottomDetailsRowTitle = BottomDetailsRowTitle;

package/dist/stories/components/TotalCostModal.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Modal = _interopRequireDefault(require("./Modal"));
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
+var _TextField = _interopRequireDefault(require("./TextField"));
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _reactHookForm = require("react-hook-form");
+var _Modal2 = require("./Modal.style");
+var TotalCostModal = function TotalCostModal(_ref) {
+  var title = _ref.title,
+    isModalOpen = _ref.isModalOpen,
+    setModalOpen = _ref.setModalOpen,
+    setResult = _ref.setResult;
+  var _useState = (0, _react.useState)([{
+      id: "title",
+      label: "Title",
+      type: "text"
+    }, {
+      id: "dotCut",
+      label: "Do Cut",
+      type: "select",
+      options: ["true", "false"]
+    }, {
+      id: "currency",
+      label: "Currency",
+      type: "select",
+      options: ["true", "false"]
+    }, {
+      id: "currencyType",
+      label: "Currency Type",
+      type: "select",
+      options: ["USD", "EUR", "ILS", "GBP", "JPY"]
+    }, {
+      id: "width",
+      label: "Width",
+      type: "text"
+    }, {
+      id: "height",
+      label: "Height",
+      type: "text"
+    }, {
+      id: "textColor",
+      label: "Text Color",
+      type: "text"
+    }, {
+      id: "noDataText",
+      label: "No Data Text",
+      type: "text"
+    }]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    params = _useState2[0],
+    setParams = _useState2[1];
+  var _useState3 = (0, _react.useState)("Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE"),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    code = _useState4[0],
+    setCode = _useState4[1];
+  var _useForm = (0, _reactHookForm.useForm)(),
+    register = _useForm.register,
+    handleSubmit = _useForm.handleSubmit,
+    watch = _useForm.watch,
+    control = _useForm.control,
+    errors = _useForm.formState.errors;
+  var onSubmit = function onSubmit(data) {
+    return setResult(data);
+  };
+  return /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    isOpen: isModalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gap: "10px",
+      display: "grid"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CodeEditor.default, {
+    value: code,
+    onChange: setCode
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gap: "10px",
+      display: "grid",
+      gridTemplateColumns: "auto auto auto"
+    }
+  }, params.map(function (item) {
+    if (item.type === "text") {
+      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        control: control,
+        name: item.id,
+        render: function render(_ref2) {
+          var field = _ref2.field;
+          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
+            allowedInput: "all",
+            height: "100%",
+            label: item.label,
+            multiline: true,
+            placeHolder: "Type...",
+            shape: "round",
+            size: "small",
+            width: "300px"
+          }));
+        }
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        control: control,
+        name: item.id,
+        render: function render(_ref3) {
+          var field = _ref3.field;
+          return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
+            allowedInput: "all",
+            labelColor: "#1B30AA",
+            limitTagsOnMultiSelect: 0,
+            onInputChange: function onInputChange(e) {
+              var _e$inputValue;
+              console.log("e", e);
+              field.onChange((_e$inputValue = e === null || e === void 0 ? void 0 : e.inputValue) !== null && _e$inputValue !== void 0 ? _e$inputValue : "");
+            },
+            options: item.options,
+            placeHolder: "Type...",
+            shape: "round",
+            size: "small",
+            text: item.label,
+            width: "300px"
+          }));
+        }
+      });
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_Modal2.SubmitButton, {
+    type: "submit"
+  })));
+};
+var _default = TotalCostModal;
+exports.default = _default;

package/dist/stories/components/TotalDoughnutChart.js

@@ -124,9 +124,9 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
       id: "LegendFormatedValueContainer"
     }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, {
       id: "LegendCurrencySign"
-    }, row.value != undefined && row.value != null && currency ? (0, _CommonFunctions.getCurrencySign)(currencyType) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, {
+    }, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, {
       id: "LegendFormattedValue"
-    }, row.value != undefined && row.value != null ? dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value) : "No Data", row.value != undefined && row.value != null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : ""))));
+    }, dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : ""))));
   })))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));

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

@@ -26,33 +26,33 @@ var TooltipLabel = _styledComponents.default.p(_templateObject4 || (_templateObj
 exports.TooltipLabel = TooltipLabel;
 var TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 90%;\n  //margin-top: 6%;\n"])));
 exports.TitleAndValueContainer = TitleAndValueContainer;
-var Title = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  font-weight: 500;\n  font-size: 1rem;\n  //margin-bottom: 1rem;\n"])));
+var Title = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  font-weight: 600;\n  font-size: 1rem;\n  margin-bottom: 1rem;\n"])));
 exports.Title = Title;
 var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"])));
 exports.CurrencySignAndFormattedValueContainer = CurrencySignAndFormattedValueContainer;
 var CurrencySign = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n"])));
 exports.CurrencySign = CurrencySign;
-var FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 2.22222rem;\n"])));
+var FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 2.22rem;\n"])));
 exports.FormattedValue = FormattedValue;
-var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 95%;\n  height: 37%;\n  margin-top: 1em; \n  margin-bottom: 1em;  \n"])));
+var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 95%;\n  height: 37%;\n  margin-top: 1em; //   35px;\n  margin-bottom: 1em; // 35px;\n"])));
 exports.DoughnutChartAndLegendContainer = DoughnutChartAndLegendContainer;
 var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 34%;\n  height: 100%;\n  min-width: 105px;\n  min-height: 105px;\n"])));
 exports.DoughnutChart = DoughnutChart;
 var LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 66%;\n  padding-left: 10px;\n  flex-direction: column;\n  align-items: left;\n  justify-content: space-between;\n"])));
 exports.LegendContainer = LegendContainer;
-var LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n"])));
+var LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  /* flex-direction: row; */\n  align-items: center;\n  /* height: 50%;\n  width: 100%; */\n  margin-bottom: 5px;\n"])));
 exports.LegendControlsContainer = LegendControlsContainer;
-var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n"])));
+var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  //display: flex;\n  /* width: 100%;\n  height: 100%; */\n  margin-left: 0.1rem;\n  //flex-direction: column;\n"])));
 exports.LegendTitleAndFormatedValueContainer = LegendTitleAndFormatedValueContainer;
-var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  font-weight: 700;\n  font-size: 16px;\n"])));
+var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  /* width: 100%;\n  height: 50%; */\n  font-weight: 600;\n  font-size: 13px;\n"])));
 exports.LegendFormatedValueContainer = LegendFormatedValueContainer;
-var LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.8rem;\n  height: 0.77778rem;\n  margin-right: 0.3rem;\n  background: ", ";\n"])), function (props) {
+var LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.8rem;\n  height: 0.7rem;\n  margin-right: 0.3rem;\n  background: ", ";\n"])), function (props) {
   return props.color;
 });
 exports.LegendColorRectangle = LegendColorRectangle;
-var LegendTitle = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 16px;\n"])));
+var LegendTitle = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 13px;\n  //width: 100%;\n  //height: 50%;\n"])));
 exports.LegendTitle = LegendTitle;
-var LegendCurrencySign = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var LegendCurrencySign = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  /* font-weight: 600;\n  font-size: 0.8rem; */\n"])));
 exports.LegendCurrencySign = LegendCurrencySign;
-var LegendFormattedValue = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var LegendFormattedValue = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  /* font-weight: 600;\n  font-size: 0.8rem; */\n"])));
 exports.LegendFormattedValue = LegendFormattedValue;

package/dist/stories/components/icons/InfoIcon.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var InfoIcon = function InfoIcon(_ref) {
   var clicked = _ref.clicked,
     _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "18" : _ref$width,
+    width = _ref$width === void 0 ? "16" : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "18" : _ref$height;
+    height = _ref$height === void 0 ? "16" : _ref$height;
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: width,
     height: height,
@@ -20,7 +20,7 @@ var InfoIcon = function InfoIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M8 0C12.4062 0 16 3.59375 16 8C16 12.4375 12.4062 16 8 16C3.5625 16 0 12.4375 0 8C0 3.59375 3.5625 0 8 0ZM8 15C11.8438 15 15 11.875 15 8C15 4.15625 11.8438 1 8 1C4.125 1 1 4.15625 1 8C1 11.875 4.125 15 8 15ZM8 5.75C7.5625 5.75 7.25 5.4375 7.25 5C7.25 4.59375 7.5625 4.25 8 4.25C8.40625 4.25 8.75 4.59375 8.75 5C8.75 5.4375 8.40625 5.75 8 5.75ZM9.5 11C9.75 11 10 11.25 10 11.5C10 11.7812 9.75 12 9.5 12H6.5C6.21875 12 6 11.7812 6 11.5C6 11.25 6.21875 11 6.5 11H7.5V8H7C6.71875 8 6.5 7.78125 6.5 7.5C6.5 7.25 6.71875 7 7 7H8C8.25 7 8.5 7.25 8.5 7.5V11H9.5Z",
-    fill: "#757575"
+    fill: "#1B30AA"
   }));
 };
 exports.InfoIcon = InfoIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.249",
+  "version": "1.0.250",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -50,11 +50,14 @@
     "@mui/material": "^5.13.0",
     "@mui/styled-engine-sc": "^5.12.0",
     "@mui/x-date-pickers": "^6.11.1",
+    "ace-builds": "^1.27.0",
     "babel-plugin-react-css-modules": "^5.2.6",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",
     "hoopy": "^0.1.4",
+    "react-ace": "^10.1.0",
     "react-css-modules": "^4.7.11",
+    "react-hook-form": "^7.46.2",
     "react-loading-skeleton": "^3.3.1",
     "react-scripts": "5.0.1",
     "recharts": "^2.6.2"