sag_components 1.0.359 → 1.0.360

package/dist/stories/components/Benchmark.js

@@ -39,6 +39,9 @@ var Benchmark = exports.Benchmark = function Benchmark(props) {
     } else {
       benchmarkCurrentValue = benchmarkValue / totalValue;
     }
+    if (currentValue === benchmarkValue) {
+      return color;
+    }
     if (currentValue / totalValue <= benchmarkCurrentValue) {
       return underAvarageColor;
     }
@@ -55,6 +58,9 @@ var Benchmark = exports.Benchmark = function Benchmark(props) {
     } else {
       benchmarkCurrentValue = benchmarkValue / totalValue;
     }
+    if (currentValue === benchmarkValue) {
+      return linearGradientColor;
+    }
     if (currentValue / totalValue <= benchmarkCurrentValue) {
       return linearGradientUnderAvarageColor;
     }
@@ -117,5 +123,5 @@ Benchmark.defaultProps = {
   linearGradientUnderAvarageColor: '#FDB1B1',
   backgroundColor: '#F2F2F2',
   tooltipLabel: 'Benchmark',
-  tooltipDirection: 'top'
+  tooltipDirection: 'bottom'
 };

package/dist/stories/components/CodeEditor.js

@@ -18,7 +18,8 @@ var CodeEditor = function CodeEditor(_ref) {
     onChange = _ref.onChange;
   return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
     style: {
-      height: "200px"
+      height: '300px',
+      width: '100%'
     },
     mode: "mysql",
     theme: "monokai",

package/dist/stories/components/KpiFilter.js

@@ -28,12 +28,12 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
     onClick = props.onClick,
     onClickIncludeBenchmark = props.onClickIncludeBenchmark,
     onClickPeriod = props.onClickPeriod;
-  var DEFAULT_PERIOD = "4 weeks";
+  var DEFAULT_PERIOD = '4 weeks';
   var _useState = (0, _react.useState)(kpiData),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     KpiDataState = _useState2[0],
     setKpiDataState = _useState2[1];
-  var _useState3 = (0, _react.useState)("4 weeks"),
+  var _useState3 = (0, _react.useState)('4 weeks'),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     periodState = _useState4[0],
     setPeriodSate = _useState4[1];
@@ -54,7 +54,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           kpiSelectedButtonsLabels.push(kpiSelectedData[i][j].label);
         }
         if (kpiSelectedData[i][j].secondButtonLabel && kpiSelectedData[i][j].secondButtonChecked === true) {
-          kpiSelectedButtonsLabels.push("".concat("", kpiSelectedData[i][j].label, ":", kpiSelectedData[i][j].secondButtonLabel));
+          kpiSelectedButtonsLabels.push(''.concat('', kpiSelectedData[i][j].label, ':', kpiSelectedData[i][j].secondButtonLabel));
         }
       }
     }
@@ -66,7 +66,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
   // ------------------------- Buttons OnClick Handler - End ------------------
 
   var dispalyColumnButtons = function dispalyColumnButtons(data, height) {
-    var paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "5px";
+    var paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
     if (data && data.length > 0) {
       return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonsContainer, {
         id: "ButtonsContainer",
@@ -76,8 +76,8 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
         var _item$marginBottom;
         return /*#__PURE__*/_react.default.createElement(_KpiFilter.ButtonContainer, {
           id: "ButtonContainer",
-          className: item.marginBottom ? "marginBottom" : "",
-          marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : "0px"
+          className: item.marginBottom ? 'marginBottom' : '',
+          marginBottom: (_item$marginBottom = item.marginBottom) !== null && _item$marginBottom !== void 0 ? _item$marginBottom : '0px'
         }, /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
           backgroundColorChecked: buttonsBackgroundColorChecked,
           backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
@@ -101,7 +101,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
                 })
               });
             });
-            console.log("newDataKpi", newDataKpi);
+            console.log('newDataKpi', newDataKpi);
             setKpiDataState(newDataKpi);
           },
           textColorChecked: buttonsTextColorChecked,
@@ -118,26 +118,26 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
           height: "29px",
           iconColor: buttonsIconColor,
           iconSize: "12px",
-          label: "".concat("", item.label, ":", item.secondButtonLabel),
+          label: ''.concat('', item.label, ':', item.secondButtonLabel),
           displayLabel: item.secondButtonLabel,
           onClick: function onClick(props) {
             var newDataKpi = KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.map(function (itemColumn) {
               var _itemColumn$buttonsAr3;
               return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemColumn), {}, {
                 buttonsArray: (_itemColumn$buttonsAr3 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr3 === void 0 ? void 0 : _itemColumn$buttonsAr3.map(function (itemButton) {
-                  return "".concat("", itemButton.label, ":", itemButton.secondButtonLabel) === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
+                  return ''.concat('', itemButton.label, ':', itemButton.secondButtonLabel) === props.label ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemButton), {}, {
                     secondButtonChecked: props.checked
                   }) : (0, _objectSpread2.default)({}, itemButton);
                 })
               });
             });
             setKpiDataState(newDataKpi);
-            console.log("newDataKpi", newDataKpi, props);
+            console.log('newDataKpi', newDataKpi, props);
           },
           textColorChecked: buttonsTextColorChecked,
           textColorUnchecked: buttonsTextColorUnchecked,
           width: "100%"
-        }) : "");
+        }) : '');
       }));
     }
   };
@@ -199,7 +199,7 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
     }, /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "4 weeks",
-      checked: periodState === "4 weeks" ? true : false,
+      checked: periodState === '4 weeks',
       colorChecked: buttonsIconColor,
       colorUnchecked: buttonsIconColor,
       colorDisabled: buttonsIconColor,
@@ -207,14 +207,14 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === "4 weeks" ? true : false,
+      disabled: periodState === '4 weeks',
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
     }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "8 weeks",
-      checked: periodState === "8 weeks" ? true : false,
+      checked: periodState === '8 weeks',
       colorChecked: buttonsIconColor,
       colorUnchecked: buttonsIconColor,
       colorDisabled: buttonsIconColor,
@@ -222,14 +222,14 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === "8 weeks" ? true : false,
+      disabled: periodState === '8 weeks',
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
     }), /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBox, {
       id: "CheckBox",
       label: "13 weeks",
-      checked: periodState === "13 weeks" ? true : false,
+      checked: periodState === '13 weeks',
       colorChecked: buttonsIconColor,
       colorUnchecked: buttonsIconColor,
       colorDisabled: buttonsIconColor,
@@ -237,29 +237,31 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
       height: "20px",
       width: "100%",
       iconSize: "14px",
-      disabled: periodState === "13 weeks" ? true : false,
+      disabled: periodState === '13 weeks',
       onClick: function onClick(props) {
         onClickPeriodHandler(props);
       }
     }));
   };
   var displayColumns = function displayColumns() {
-    if (KpiDataState && (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) > 0) return /*#__PURE__*/_react.default.createElement(_KpiFilter.AllColumnsContainer, {
-      id: "AllColumnsContainer"
-    }, KpiDataState.map(function (item, i) {
-      return /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnAndLineContainer, {
-        id: "ColumnAndLineContainer"
-      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnContainer, {
-        id: "ColumnContainer"
-      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleContainer, {
-        id: "ColumnTitleContainer"
-      }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitle, {
-        id: "ColumnTitle"
-      }, item.columnTitle)), dispalyColumnButtons(item.buttonsArray, height = "160px", "0px"), i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? /*#__PURE__*/_react.default.createElement(_KpiFilter.PeriodColumnTitle, null, periodTitle) : "", i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? displayPeriod() : ""), item.rightBorder ? /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnRightLineSeporator, null) : "");
-    }));
+    if (KpiDataState && (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) > 0) {
+      return /*#__PURE__*/_react.default.createElement(_KpiFilter.AllColumnsContainer, {
+        id: "AllColumnsContainer"
+      }, KpiDataState.map(function (item, i) {
+        return /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnAndLineContainer, {
+          id: "ColumnAndLineContainer"
+        }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnContainer, {
+          id: "ColumnContainer"
+        }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitleContainer, {
+          id: "ColumnTitleContainer"
+        }, /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnTitle, {
+          id: "ColumnTitle"
+        }, item.columnTitle)), dispalyColumnButtons(item.buttonsArray, height = '160px', '0px'), i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? /*#__PURE__*/_react.default.createElement(_KpiFilter.PeriodColumnTitle, null, periodTitle) : '', i === (KpiDataState === null || KpiDataState === void 0 ? void 0 : KpiDataState.length) - 1 ? displayPeriod() : ''), item.rightBorder ? /*#__PURE__*/_react.default.createElement(_KpiFilter.ColumnRightLineSeporator, null) : '');
+      }));
+    }
   };
 
-  //========================================= MAIN RETURN ====================================
+  //= ======================================== MAIN RETURN ====================================
   return /*#__PURE__*/_react.default.createElement(_KpiFilter.MainContainer, {
     id: "MainContainer",
     height: height,
@@ -267,21 +269,21 @@ var KpiFilter = exports.KpiFilter = function KpiFilter(props) {
   }, /*#__PURE__*/_react.default.createElement(_KpiFilter.PanelContainer, {
     id: "PanelContainer"
   }, displayMainTitle(), displayColumns()));
-  //========================================= MAIN RETURN END====================================
+  //= ======================================== MAIN RETURN END====================================
 };
 var _default = exports.default = KpiFilter;
 KpiFilter.defaultProps = {
-  mainTitle: "Select Table Columns",
-  periodTitle: "Pre and Post Event Period",
+  mainTitle: 'Select Table Columns',
+  periodTitle: 'Pre and Post Event Period',
   kpiData: [],
-  width: "100%",
-  height: "100%",
-  buttonsIconColor: "#1B30AA",
-  buttonsBorderColor: "#1B30AA",
-  buttonsTextColorChecked: "#212121",
-  buttonsTextColorUnchecked: "#212121",
-  buttonsBackgroundColorChecked: "#E9F1FF",
-  buttonsBackgroundColorUnchecked: "#F2F2F2",
+  width: '100%',
+  height: '100%',
+  buttonsIconColor: '#1B30AA',
+  buttonsBorderColor: '#1B30AA',
+  buttonsTextColorChecked: '#212121',
+  buttonsTextColorUnchecked: '#212121',
+  buttonsBackgroundColorChecked: '#E9F1FF',
+  buttonsBackgroundColorUnchecked: '#F2F2F2',
   onClick: function onClick() {},
   onClickIncludeBenchmark: function onClickIncludeBenchmark() {},
   onClickPeriod: function onClickPeriod() {}

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

@@ -12,6 +12,6 @@ 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 = exports.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);
-var ModalContent = exports.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);
+var ModalContent = exports.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: 80%;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  animation: ", " 0.5s ease-in-out;\n"])), fadeIn);
 var CloseButton = exports.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"])));
 var SubmitButton = exports.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"])));

package/dist/stories/components/ModalTotalBenchmark.js

@@ -32,6 +32,7 @@ var ModalTotalBenchmark = function ModalTotalBenchmark(_ref) {
     code = _useState4[0],
     setCode = _useState4[1];
   function getTypeName(type) {
+    console.log('types', typeof type, typeof _propTypes.default.string);
     if (type === _propTypes.default.string) {
       return 'string';
     }
@@ -44,7 +45,7 @@ var ModalTotalBenchmark = function ModalTotalBenchmark(_ref) {
     if (type === _propTypes.default.array) {
       return 'array';
     }
-    if (type === _propTypes.default.object) {
+    if (type === _propTypes.default.object || type === _propTypes.default.arrayOf) {
       return 'object';
     }
     if (type === _propTypes.default.func) {
@@ -77,12 +78,10 @@ var ModalTotalBenchmark = function ModalTotalBenchmark(_ref) {
   (0, _react.useEffect)(function () {
     var newParams = withPropTypeChecks((0, _ComponentFactory.default)(componentName));
     setParams(newParams);
-    console.log('newParams', newParams);
+    console.log('newParams', newParams, componentName);
   }, []);
   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) {
@@ -157,14 +156,53 @@ var ModalTotalBenchmark = function ModalTotalBenchmark(_ref) {
       });
     }
     if (item.type === 'other') {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+      console.log('item', item);
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        key: item.id,
+        control: control,
+        name: "".concat(item.id, "Key"),
+        render: function render(_ref4) {
+          var field = _ref4.field;
+          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
+            label: "".concat(item.label, "Key"),
+            text: "".concat(item.label, "Key"),
+            allowedInput: "all",
+            labelColor: "#1B30AA",
+            width: "300px",
+            height: "100%",
+            multiline: true,
+            placeHolder: "The Key",
+            shape: "round",
+            size: "small"
+          }));
+        }
+      }), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        key: item.id,
+        control: control,
+        name: "".concat(item.id, "Args"),
+        render: function render(_ref5) {
+          var field = _ref5.field;
+          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
+            label: "".concat(item.label, "Args"),
+            text: "".concat(item.label, "Args"),
+            allowedInput: "all",
+            labelColor: "#1B30AA",
+            width: "300px",
+            height: "100%",
+            multiline: true,
+            placeHolder: "The args",
+            shape: "round",
+            size: "small"
+          }));
+        }
+      }));
     }
     return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
       key: item.id,
       control: control,
       name: item.id,
-      render: function render(_ref4) {
-        var field = _ref4.field;
+      render: function render(_ref6) {
+        var field = _ref6.field;
         return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
           allowedInput: "all",
           labelColor: "#1B30AA",

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

@@ -15,4 +15,4 @@ var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(
 var TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n"])));
 
 /* Absolute positioning */
-var TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 8px 12px;\n  color: var(--tooltip-text-color);\n  background: var(--tooltip-background-color);\n  font-size: 12px;\n  font-family: sans-serif;\n  line-height: 1;\n  z-index: 100;\n  white-space: nowrap;\n \n  /* CSS border triangles */\n  &.controls::before {\n    content: \" \";\n    left: 50%;\n    border: solid transparent;\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-width: var(--tooltip-arrow-size);\n    margin-left: calc(var(--tooltip-arrow-size) * -1);\n  }\n\n  /* Absolute positioning */\n  &.controls.top {\n    top: calc(var(--tooltip-margin) * -1);\n  }\n\n  /* CSS border triangles */\n  &.controls.top::before {\n    top: 100%;\n    border-top-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.right {\n    left: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n\n  /* CSS border triangles */\n  &.controls.right::before {\n    left: calc(var(--tooltip-arrow-size) * -1);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-right-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.bottom {\n    bottom: calc(var(--tooltip-margin) * -1);\n  }\n  /* CSS border triangles */\n  &.controls.bottom::before {\n    bottom: 100%;\n    border-bottom-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.left {\n    left: auto;\n    right: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n  /* CSS border triangles */\n  &.controls.left::before {\n    left: auto;\n    right: calc(var(--tooltip-arrow-size) * -2);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-left-color: var(--tooltip-background-color);\n  }\n"])));
+var TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 4px 6px;\n  color: var(--tooltip-text-color);\n  background: var(--tooltip-background-color);\n  font-size: 12px;\n  font-family: sans-serif;\n  line-height: 1;\n  z-index: 100;\n  white-space: nowrap;\n \n  /* CSS border triangles */\n  &.controls::before {\n    content: \" \";\n    left: 50%;\n    border: solid transparent;\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-width: var(--tooltip-arrow-size);\n    margin-left: calc(var(--tooltip-arrow-size) * -1);\n  }\n\n  /* Absolute positioning */\n  &.controls.top {\n    top: calc(var(--tooltip-margin) * -1);\n  }\n\n  /* CSS border triangles */\n  &.controls.top::before {\n    top: 100%;\n    border-top-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.right {\n    left: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n\n  /* CSS border triangles */\n  &.controls.right::before {\n    left: calc(var(--tooltip-arrow-size) * -1);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-right-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.bottom {\n    bottom: calc(var(--tooltip-margin) * -1);\n  }\n  /* CSS border triangles */\n  &.controls.bottom::before {\n    bottom: 100%;\n    border-bottom-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.left {\n    left: auto;\n    right: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n  /* CSS border triangles */\n  &.controls.left::before {\n    left: auto;\n    right: calc(var(--tooltip-arrow-size) * -2);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-left-color: var(--tooltip-background-color);\n  }\n"])));

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

@@ -18,14 +18,14 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
 var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 5px;\n  background: #fff;\n  font-family: \"Poppins\", sans-serif;\n  border-radius: 5px;\n  padding: 8px 12px;\n  display: grid;\n"])));
 var TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  width: fit-content;\n"])));
 var TooltipTitle = exports.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"])));
-var Controls = exports.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 = exports.Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background: #ffffff;\n  border-radius: 12px;\n"])));
 var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 1rem;\n"])));
-var Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n\n"])));
-var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: baseline;\n\n"])));
+var Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 1rem;\n"])));
+var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: baseline;\n"])));
 var DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 1.2rem;\n  align-items: flex-end;\n"])));
 var FormattedValue = exports.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 FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;  \n"])));
 var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 1.5rem;\n"])));
-var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\n  width: 100%;\n  height: 50%;\n"])));
+var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  /* height: 50%; */\n"])));
 var BottomDetailsRowContainer = exports.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 BottomDetailsRowTitle = exports.BottomDetailsRowTitle = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 0.77778rem;\n"])));

package/dist/stories/components/TotalBenchmarkBarchart.js

@@ -15,7 +15,6 @@ var _Benchmark = require("./Benchmark");
 var _TotalBenchmarkBarchart = require("./TotalBenchmarkBarchart.style");
 /* TotalBenchmarkBarchart */
 var TotalBenchmarkBarchart = exports.TotalBenchmarkBarchart = function TotalBenchmarkBarchart(props) {
-  var _getFormattedBarChart, _getFormattedBarChart2;
   var title = props.title,
     value = props.value,
     addingBenchmark = props.addingBenchmark,
@@ -41,50 +40,7 @@ var TotalBenchmarkBarchart = exports.TotalBenchmarkBarchart = function TotalBenc
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     heightFactor = _useState4[0],
     setHeightFactor = _useState4[1];
-
-  // const [formattedBarChartData, setFormattedBarChartData] = useState([]);
-
   var controlsContainerRef = (0, _react.useRef)();
-
-  // useEffect(() => {
-  //   let tempFormattedBarChartData = [];
-
-  //   const currencySign =
-  //     currency == true ? getCurrencySign(currencyType).toString() : "";
-
-  //   if (barChartData && barChartData.length === 2) {
-  //     tempFormattedBarChartData.push({
-  //       title1: barChartData[0].title,
-  //       value1: barChartData[0].value,
-  //       formattedValue1: currencySign.concat(
-  //         "",
-  //         getFormattedValue(barChartData[0].value),
-  //         "",
-  //         getFormattedUnits(barChartData[0].value)
-  //       ),
-
-  //       color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
-
-  //       title2: barChartData[1].title,
-  //       value2: barChartData[1].value,
-  //       formattedValue2: currencySign.concat(
-  //         "",
-  //         getFormattedValue(barChartData[1].value),
-  //         "",
-  //         getFormattedUnits(barChartData[1].value)
-  //       ),
-  //       color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF",
-  //     });
-
-  //     console.log("barChartData changed", barChartData);
-  //     setFormattedBarChartData(tempFormattedBarChartData);
-  //     console.log(
-  //       "tempFormattedBarChartData changed",
-  //       tempFormattedBarChartData
-  //     );
-  //   }
-  // }, [barChartData, currency, currencyType]);
-
   (0, _react.useEffect)(function () {
     var offsetWidth = controlsContainerRef.current.offsetWidth;
     setRootFont(getRootFont(offsetWidth));
@@ -103,21 +59,21 @@ var TotalBenchmarkBarchart = exports.TotalBenchmarkBarchart = function TotalBenc
     return rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
   };
   var getFormattedBarChartData = function getFormattedBarChartData() {
-    var tempFormattedBarChartData = [];
-    var currencySign = currency == true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : '';
+    var formattedBarChartData = [];
+    var currencySign = currency === true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : '';
     if (barChartData && (barChartData === null || barChartData === void 0 ? void 0 : 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',
-        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',
-        color2: barChartData[1].color ? barChartData[1].color : '#D4C0FF'
+      barChartData.forEach(function (data, i) {
+        var formattedData = {
+          id: i,
+          title: data.title,
+          value: data.value,
+          formattedValue: data.value !== undefined && data.value != null ? currencySign.concat('', (0, _CommonFunctions.getFormattedValue)(data.value), '', (0, _CommonFunctions.getFormattedUnits)(data.value)) : 'No Data',
+          color: data.color
+        };
+        formattedBarChartData.push(formattedData);
       });
-      return tempFormattedBarChartData;
     }
+    return formattedBarChartData;
   };
   return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.ControlsContainer, {
     id: "ControlsContainer",
@@ -135,9 +91,9 @@ var TotalBenchmarkBarchart = exports.TotalBenchmarkBarchart = function TotalBenc
     id: "ValueAndBenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.CurrencySign, {
     id: "CurrencySign"
-  }, value != undefined && value != null && currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.FormattedValue, {
+  }, value !== undefined && value !== null && currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.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(_TotalBenchmarkBarchart.FormattedValueNoDataMessage, null, value === undefined || value === null ? 'No Data' : ''), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.BenchmarkContainer, {
+  }, 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(_TotalBenchmarkBarchart.FormattedValueNoDataMessage, null, value === undefined || value === null ? 'No Data' : ''), addingBenchmark && benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.BenchmarkContainer, {
     id: "BenchmarkContainer"
   }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
     totalValue: benchmarkTotalValue !== null && benchmarkTotalValue !== void 0 ? benchmarkTotalValue : 0,
@@ -152,51 +108,39 @@ var TotalBenchmarkBarchart = exports.TotalBenchmarkBarchart = function TotalBenc
     backgroundColor: "#F2F2F2"
   })) : '')), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.BarchartContainer, {
     id: "BarchartContainer"
-  }, getFormattedBarChartData() && ((_getFormattedBarChart = getFormattedBarChartData()) === null || _getFormattedBarChart === void 0 ? void 0 : _getFormattedBarChart.length) === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
     width: 224 * getSizeFactor(),
     height: 150 * heightFactor,
     data: getFormattedBarChartData(),
     margin: {
       top: 40 * heightFactor,
-      right: -25 * getSizeFactor(),
-      bottom: 0,
-      left: -25 * getSizeFactor()
+      bottom: 0
     }
   }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
     strokeDasharray: "3 3",
     vertical: false
   }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
-    dataKey: "value1",
-    fill: getFormattedBarChartData()[0].color1,
-    name: "Actual",
-    maxBarSize: 60 * getSizeFactor(),
+    dataKey: "value",
+    name: "title",
     radius: [5, 5, 0, 0]
-  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
-    dataKey: "formattedValue1",
-    position: "top",
-    fill: textcolor,
-    fontWeight: 400,
-    fontSize: "14px"
-  })), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
-    dataKey: "value2",
-    fill: getFormattedBarChartData()[0].color2,
-    name: "Base Line",
-    maxBarSize: 60 * getSizeFactor(),
-    radius: [5, 5, 0, 0],
-    label: "aaa"
-  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
-    dataKey: "formattedValue2",
+  }, getFormattedBarChartData().map(function (entry) {
+    return /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
+      key: entry.id,
+      fill: entry.color
+    });
+  }), /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+    dataKey: "formattedValue",
     position: "top",
-    fill: textcolor,
+    fill: "#212121",
     fontWeight: 400,
     fontSize: "14px"
-  }))), getFormattedBarChartData() && ((_getFormattedBarChart2 = getFormattedBarChartData()) === null || _getFormattedBarChart2 === void 0 ? void 0 : _getFormattedBarChart2.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.BottomDetailsRowContainer, {
-    id: "BottomDetailsRowContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.BottomDetailsRowTitle, {
-    id: "BottomDetailsRowTitle1"
-  }, getFormattedBarChartData()[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchart.BottomDetailsRowTitle, {
-    id: "BottomDetailsRowTitle2"
-  }, getFormattedBarChartData()[0].title2)) : '')) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  })), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
+    dataKey: "title",
+    tick: {
+      fontSize: 14
+    },
+    tickLine: false
+  })))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };
@@ -204,19 +148,19 @@ var _default = exports.default = TotalBenchmarkBarchart;
 TotalBenchmarkBarchart.defaultProps = {
   title: 'Title',
   value: 100,
-  addingBenchmark: 200,
+  addingBenchmark: true,
   benchmarkTotalValue: 300,
   benchmarkValue: 400,
   currency: true,
   currencyType: 'USD',
   barChartData: [{
-    title: 'New Redeemers',
-    value: 256200,
-    color: '#85A1D2'
+    title: 'Actual',
+    value: 175100,
+    color: '#066768'
   }, {
-    title: 'Existing Redeemers',
-    value: 700000,
-    color: '#9AE6FF'
+    title: 'Base Line',
+    value: 100000,
+    color: '#90CE9C'
   }],
   dotCut: true,
   width: '250px',

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.FormattedValueNoDataMessage = exports.FormattedValue = exports.CurrencySign = exports.ControlsContainer = exports.Controls = 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;
 var ControlsContainer = exports.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  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.textColor;
 }, function (props) {
@@ -23,6 +23,4 @@ var CurrencySign = exports.CurrencySign = _styledComponents.default.div(_templat
 var FormattedValue = exports.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 FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.3rem;\n  font-weight: 700;\n  font-size: 16px;\n  margin: 0;  \n"])));
 var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.7em;\n  width: 5.35em;\n"])));
-var BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14em;\n"])));
-var BottomDetailsRowContainer = exports.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 BottomDetailsRowTitle = exports.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 BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/utils/ComponentFactory.js

@@ -5,30 +5,59 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _Benchmark = _interopRequireDefault(require("../components/Benchmark"));
+var _Button = _interopRequireDefault(require("../components/Button"));
+var _CollapseData = _interopRequireDefault(require("../components/CollapseData"));
+var _KpiFilter = _interopRequireDefault(require("../components/KpiFilter"));
+var _TitleDescription = _interopRequireDefault(require("../components/TitleDescription"));
+var _TotalBenchmark = _interopRequireDefault(require("../components/TotalBenchmark"));
 var _TotalDoughnutChart = _interopRequireDefault(require("../components/TotalDoughnutChart"));
+var _TotalBenchmarkArrows = _interopRequireDefault(require("../components/TotalBenchmarkArrows"));
+var _TotalBenchmarkBarchart = _interopRequireDefault(require("../components/TotalBenchmarkBarchart"));
+var _TotalBenchmarkAreachart = _interopRequireDefault(require("../components/TotalBenchmarkAreachart"));
+var _PerformanceAnalyticsTotals = _interopRequireDefault(require("../components/PerformanceAnalyticsTotals"));
+var _PerformanceAnalyticsOneColumn = _interopRequireDefault(require("../components/PerformanceAnalyticsOneColumn"));
+var _PerformanceAnalyticsLegend = _interopRequireDefault(require("../components/PerformanceAnalyticsLegend"));
+var _PerformanceAnalytics = _interopRequireDefault(require("../components/PerformanceAnalytics"));
+var _OneColumnContainer = _interopRequireDefault(require("../components/OneColumnContainer"));
+var _NoDataFoundMessage = _interopRequireDefault(require("../components/NoDataFoundMessage"));
 var Factory = function Factory(_ref) {
   var componentName = _ref.componentName;
   switch (componentName) {
+    case 'Benchmark':
+      return _Benchmark.default;
+    case 'Button':
+      return _Button.default;
+    case 'CollapseData':
+      return _CollapseData.default;
+    case 'KpiFilter':
+      return _KpiFilter.default;
+    case 'TitleDescription':
+      return _TitleDescription.default;
+    case 'TotalBenchmark':
+      return _TotalBenchmark.default;
     case 'TotalDoughnutChart':
       return _TotalDoughnutChart.default;
-
-    // case 'TotalDoughnutChart':
-    //     return TotalDoughnutChart,
-
-    // case 'TotalDoughnutChart':
-    //     return TotalDoughnutChart,
-
-    // case 'TotalDoughnutChart':
-    //     return TotalDoughnutChart,
-
-    // case 'TotalDoughnutChart':
-    //     return TotalDoughnutChart;
-
-    // case 'TotalDoughnutChart':
-    //     return TotalDoughnutChart;
-
+    case 'TotalBenchmarkArrows':
+      return _TotalBenchmarkArrows.default;
+    case 'TotalBenchmarkBarchart':
+      return _TotalBenchmarkBarchart.default;
+    case 'TotalBenchmarkAreachart':
+      return _TotalBenchmarkAreachart.default;
+    case 'PerformanceAnalyticsTotals':
+      return _PerformanceAnalyticsTotals.default;
+    case 'PerformanceAnalyticsOneColumn':
+      return _PerformanceAnalyticsOneColumn.default;
+    case 'PerformanceAnalyticsLegend':
+      return _PerformanceAnalyticsLegend.default;
+    case 'PerformanceAnalytics':
+      return _PerformanceAnalytics.default;
+    case 'OneColumnContainer':
+      return _OneColumnContainer.default;
+    case 'NoDataFoundMessage':
+      return _NoDataFoundMessage.default;
     default:
-      return _TotalDoughnutChart.default;
+      return _TotalBenchmarkArrows.default;
   }
 };
 var _default = exports.default = Factory;

package/package.json

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