sag_components 1.0.358 → 1.0.360

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.358",
+  "version": "1.0.360",
   "description": "",
   "main": "dist/index.js",
   "scripts": {