sag_components 1.0.250 → 1.0.252

package/dist/stories/components/TotalDoughnutChart.js

@@ -1,136 +1,154 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TotalDoughnutChart = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _recharts = require("recharts");
 var _NoDataFoundMessage = require("./NoDataFoundMessage");
 var _CommonFunctions = require("./CommonFunctions");
-var _recharts = require("recharts");
-var _TotalDoughnutChartStyle = require("./TotalDoughnutChart.style.js");
-var _excluded = ["title", "value", "dotCut", "currency", "currencyType", "legendData", "width", "height", "textColor", "noDataText"];
-/*TotalDoughnutChart*/
-var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "Total Cost" : _ref$title,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? 0 : _ref$value,
-    _ref$dotCut = _ref.dotCut,
-    dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
-    _ref$currency = _ref.currency,
-    currency = _ref$currency === void 0 ? true : _ref$currency,
-    _ref$currencyType = _ref.currencyType,
-    currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
-    legendData = _ref.legendData,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "250px" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "280px" : _ref$height,
-    _ref$textColor = _ref.textColor,
-    textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
-    _ref$noDataText = _ref.noDataText,
-    noDataText = _ref$noDataText === void 0 ? "" : _ref$noDataText,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var DEFAULT_ROOT_FONT = 16;
+var _TotalDoughnutChart = require("./TotalDoughnutChart.style");
+var _Benchmark = require("./Benchmark");
+/* TotalDoughnutChart */
+var TotalDoughnutChart = function TotalDoughnutChart(props) {
+  var title = props.title,
+    value = props.value,
+    addingBenchmark = props.addingBenchmark,
+    dotCut = props.dotCut,
+    currencySign = props.currencySign,
+    currencyType = props.currencyType,
+    legendData = props.legendData,
+    itemsPercentagesValueAside = props.itemsPercentagesValueAside,
+    itemsBoldedValues = props.itemsBoldedValues,
+    itemsValuesSeparateLine = props.itemsValuesSeparateLine,
+    width = props.width,
+    height = props.height,
+    textColor = props.textColor,
+    noDataText = props.noDataText;
+  var DEFAULT_ROOT_FONT = 18;
   var DEFAULT_COMPONENT_WIDTH = 250;
-  var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
+  var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px')),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     rootFont = _useState2[0],
     setRootFont = _useState2[1];
   var controlsContainerRef = (0, _react.useRef)();
+  var getRootFont = function getRootFont(scopeWidth) {
+    var relation = scopeWidth.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
+    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
+    return fontRoot;
+  };
+  var dotCutTrenty = function dotCutTrenty(row) {
+    return dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value);
+  };
   (0, _react.useEffect)(function () {
     var offsetWidth = controlsContainerRef.current.offsetWidth;
     setRootFont(getRootFont(offsetWidth));
   }, [width]);
-  var getRootFont = function getRootFont(width) {
-    var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
-    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
-    return fontRoot;
-  };
-  var CustomTooltip = function CustomTooltip(_ref2) {
-    var active = _ref2.active,
-      payload = _ref2.payload,
-      label = _ref2.label;
-    if (active && payload && payload.length) {
-      console.log(active, payload, label);
-      var percent = value && value != 0 ? (payload[0].value / value * 100).toFixed(0) : 0;
-      return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TooltipLabel, null, "".concat(payload[0].name, " ").concat(percent, "%")));
-    }
-    return null;
-  };
-  var onPieEnterHandler = function onPieEnterHandler() {};
-  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.ControlsContainer, {
+  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.ControlsContainer, {
     id: "ControlsContainer",
     height: height,
     width: width,
     textColor: textColor,
     ref: controlsContainerRef,
     rootFont: rootFont
-  }, (legendData === null || legendData === void 0 ? void 0 : legendData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Controls, {
+  }, (legendData === null || legendData === void 0 ? void 0 : legendData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Controls, {
     id: "Controls",
     height: height,
     width: width
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.TitleAndValueContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TitleAndValueContainer, {
     id: "TitleAndValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.Title, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Title, {
     id: "Title",
     width: width
-  }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySignAndFormattedValueContainer, {
+  }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySignAndFormattedValueContainer, {
     id: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.CurrencySign, {
-    id: "CurrencySign"
-  }, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.FormattedValue, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.FormattedValue, {
     id: "FormattedValue",
     width: width
-  }, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChartAndLegendContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySign, {
+    id: "CurrencySign"
+  }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''), addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartAndLegendContainer, {
     id: "DoughnutChartAndLegendContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.DoughnutChart, {
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChart, {
     id: "DoughnutChart",
     width: width,
     height: height
-  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
-    onMouseEnter: onPieEnterHandler
-  }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
-    data: legendData,
-    outerRadius: 37 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
-    innerRadius: 26 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
+  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, null, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
     fill: "#8884d8",
-    dataKey: "value"
-  }, legendData.map(function (row, index) {
+    dataKey: "value",
+    blendStroke: true,
+    startAngle: -270,
+    data: legendData,
+    outerRadius: rootFont.toString().replace('px', '') * 2,
+    innerRadius: rootFont.toString().replace('px', '') * 1.5
+  }, legendData.map(function (row) {
     return /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
-      key: "cell-".concat(index),
+      key: "cell-".concat(row.name),
       fill: row.color
     });
   })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
-    content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
-  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendContainer, {
+    content: /*#__PURE__*/_react.default.createElement(CustomTooltip, {
+      value: value
+    })
+  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendContainer, {
     id: "LegendContainer"
-  }, legendData.map(function (row, index) {
-    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendControlsContainer, {
+  }, legendData.map(function (row) {
+    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendControlsContainer, {
       id: "LegendControlsContainer"
-    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendColorRectangle, {
+    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendColorRectangle, {
       id: "LegendColorRectangle",
       color: row.color
-    }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitleAndFormatedValueContainer, {
+    }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitleAndFormatedValueContainer, {
       id: "LegendTitleAndFormatedValueContainer"
-    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendTitle, {
-      id: "LegendTitle"
-    }, row.name), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormatedValueContainer, {
-      id: "LegendFormatedValueContainer"
-    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendCurrencySign, {
-      id: "LegendCurrencySign"
-    }, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType) : ""), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChartStyle.LegendFormattedValue, {
-      id: "LegendFormattedValue"
-    }, dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : ""))));
+    }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitle, {
+      id: "LegendTitle",
+      style: {
+        flexWrap: itemsValuesSeparateLine ? 'wrap' : 'nowrap'
+      }
+    }, row.name, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendFormattedValue, {
+      id: "LegendFormattedValue",
+      style: {
+        fontWeight: itemsBoldedValues ? '700' : '500'
+      }
+    }, row.value !== undefined && row.value !== null ? dotCutTrenty(row) : 'No Data', row.value !== undefined && row.value !== null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)")))));
   })))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
 exports.TotalDoughnutChart = TotalDoughnutChart;
 var _default = TotalDoughnutChart;
-exports.default = _default;
+exports.default = _default;
+TotalDoughnutChart.defaultProps = {
+  title: 'Total Cost',
+  value: 0,
+  addingBenchmark: false,
+  dotCut: false,
+  currencySign: false,
+  currencyType: 'USD',
+  legendData: [],
+  itemsPercentagesValueAside: false,
+  itemsBoldedValues: true,
+  itemsValuesSeparateLine: false,
+  width: '300px',
+  height: '280px',
+  textColor: '#212121',
+  noDataText: ''
+};
+function CustomTooltip(_ref) {
+  var active = _ref.active,
+    payload = _ref.payload,
+    value = _ref.value;
+  if (active && payload && payload.length) {
+    var percent = value && value !== 0 ? (payload[0].value / value * 100).toFixed(0) : 0;
+    return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TooltipLabel, null, "".concat(payload[0].name, " ").concat(percent, "%")));
+  }
+}
+CustomTooltip.defaultProps = {
+  active: '',
+  payload: '',
+  value: ''
+};

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

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendCurrencySign = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
+exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.LegendTitleAndFormatedValueContainer = exports.LegendTitle = exports.LegendFormattedValue = exports.LegendFormatedValueContainer = exports.LegendControlsContainer = exports.LegendContainer = exports.LegendColorRectangle = exports.FormattedValue = exports.DoughnutChartAndLegendContainer = exports.DoughnutChart = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = 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, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
-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) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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-self: center;\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), function (props) {
   return props.rootFont;
 }, function (props) {
   return props.textColor;
@@ -18,41 +18,39 @@ 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: 100%;\n  height: 100%;\n  background: #ffffff;\n  align-items: center;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 20px;\n  flex-direction: column;\n  border-radius: 12px;\n  width: 100%;\n  height: 100%;\n  background: #ffffff;\n  padding: 16px;\n"])));
 exports.Controls = Controls;
-var TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  background: #fff;\n  padding: 6px 10px;\n  display: flex;\n  flex-direction: row;\n  margin:0;\n"])));
+var TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  border-radius: 5px;\n  background: #fff;\n  padding: 6px 10px;\n  display: flex;\n  margin:0;\n"])));
 exports.TooltipDiv = TooltipDiv;
-var TooltipLabel = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  width: max-content; // fit-content;  \n  line-height: normal;\n  margin:0;\n"])));
+var TooltipLabel = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  font-style: normal;\n  width: max-content; // fit-content;  \n  line-height: normal;\n  margin: 0;\n"])));
 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"])));
+var TitleAndValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
 exports.TitleAndValueContainer = TitleAndValueContainer;
-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"])));
+var Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n  margin: 0;\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"])));
+var CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
 exports.CurrencySignAndFormattedValueContainer = CurrencySignAndFormattedValueContainer;
-var CurrencySign = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n"])));
+var CurrencySign = _styledComponents.default.span(_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.22rem;\n"])));
+var FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 2.225rem;\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; //   35px;\n  margin-bottom: 1em; // 35px;\n"])));
+var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  margin-top: auto;\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"])));
+var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 40%;\n  flex-basis: 40%;\n  min-height: 6rem;\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"])));
+var LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  padding-left: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n"])));
 exports.LegendContainer = LegendContainer;
-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"])));
+var LegendControlsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  margin-bottom: 0.375rem;\n"])));
 exports.LegendControlsContainer = LegendControlsContainer;
-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"])));
+var LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
 exports.LegendTitleAndFormatedValueContainer = LegendTitleAndFormatedValueContainer;
-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"])));
+var LegendFormatedValueContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: .875rem;\n"])));
 exports.LegendFormatedValueContainer = LegendFormatedValueContainer;
-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) {
+var LegendColorRectangle = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0.875rem;\n  min-width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 2px;\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: 13px;\n  //width: 100%;\n  //height: 50%;\n"])));
+var LegendTitle = _styledComponents.default.h5(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.875rem;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 exports.LegendTitle = LegendTitle;
-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  /* font-weight: 600;\n  font-size: 0.8rem; */\n"])));
+var LegendFormattedValue = _styledComponents.default.span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  white-space: nowrap;\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 ? "16" : _ref$width,
+    width = _ref$width === void 0 ? "18" : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "16" : _ref$height;
+    height = _ref$height === void 0 ? "18" : _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: "#1B30AA"
+    fill: "#757575"
   }));
 };
 exports.InfoIcon = InfoIcon;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "sag_components",
-  "version": "1.0.250",
+  "version": "1.0.252",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
     "start": "react-scripts start",
+    "lint": "eslint .",
     "build": "cross-env BABEL_ENV=production babel src -d dist  ",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -17,26 +18,28 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
-    "@storybook/addon-a11y": "^7.0.7",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/addon-storysource": "^7.0.7",
-    "@storybook/blocks": "^7.0.6",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-storysource": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-webpack5": "^7.0.6",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "eslint": "^8.50.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.62.0",
-    "sass-loader": "^10.4.1",
-    "storybook": "^7.0.6",
-    "style-loader": "^2.0.0",
-    "styled-components": "^5.3.10"
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
@@ -50,17 +53,19 @@
     "@mui/material": "^5.13.0",
     "@mui/styled-engine-sc": "^5.12.0",
     "@mui/x-date-pickers": "^6.11.1",
-    "ace-builds": "^1.27.0",
+    "@storybook/addon-designs": "^7.0.5",
     "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",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.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"
+    "recharts": "^2.6.2",
+    "storybook": "^7.4.5",
+    "styled-components": "^5.3.11"
   },
   "browserslist": {
     "production": [

package/dist/stories/components/CodeEditor.js

@@ -1,41 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactAce = _interopRequireDefault(require("react-ace"));
-require("ace-builds/src-noconflict/mode-mysql");
-require("ace-builds/src-noconflict/theme-monokai");
-require("ace-builds/src-noconflict/ext-language_tools");
-require("ace-builds/src-noconflict/snippets/mysql");
-// CodeEditor.js
-
-var CodeEditor = function CodeEditor(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
-    style: {
-      height: "200px"
-    },
-    mode: "mysql",
-    theme: "monokai",
-    value: value,
-    onChange: onChange,
-    name: "code-editor",
-    editorProps: {
-      $blockScrolling: true
-    },
-    setOptions: {
-      enableBasicAutocompletion: true,
-      enableLiveAutocompletion: true,
-      enableSnippets: true,
-      showLineNumbers: true,
-      tabSize: 1
-    }
-  });
-};
-var _default = CodeEditor;
-exports.default = _default;

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

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AceEditorContent = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _reactAce = _interopRequireDefault(require("react-ace"));
-var _templateObject;
-var AceEditorContent = (0, _styledComponents.default)(_reactAce.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 400px;\n"])));
-exports.AceEditorContent = AceEditorContent;

package/dist/stories/components/Modal.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Modal = require("./Modal.style");
-var Modal = function Modal(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    children = _ref.children;
-  if (!isOpen) return null;
-  return /*#__PURE__*/_react.default.createElement(_Modal.ModalOverlay, null, /*#__PURE__*/_react.default.createElement(_Modal.ModalContent, null, children, /*#__PURE__*/_react.default.createElement(_Modal.CloseButton, {
-    onClick: onClose
-  }, "Close")));
-};
-var _default = Modal;
-exports.default = _default;

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

@@ -1,21 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SubmitButton = exports.ModalOverlay = exports.ModalContent = exports.CloseButton = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index:999999;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  animation: ", " 0.3s ease-in-out;\n"])), fadeIn);
-exports.ModalOverlay = ModalOverlay;
-var ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #fff;\n  overflow: scroll;\n  padding: 20px;\n  border-radius: 8px;\n  width: 50%;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.5s ease-in-out;\n"])), fadeIn);
-exports.ModalContent = ModalContent;
-var CloseButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));
-exports.CloseButton = CloseButton;
-var SubmitButton = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  margin-right: 10px;\n  padding: 5px 15px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: #555;\n  }\n"])));
-exports.SubmitButton = SubmitButton;