sag_components 1.0.937 → 1.0.939

package/dist/stories/components/BarChartTwoRows.js

@@ -22,22 +22,24 @@ const BarChartTwoRows = props => {
   const {
     className,
     title,
-    barChartData,
-    barSize,
-    isDollar,
     width,
     height,
+    barChartHeight,
+    barSize,
+    barFontSizeValue,
+    barChartData,
     barChartColorFirst,
     barChartColorSecond,
-    showLegend,
-    legendData,
     showDollarSign,
+    isDollar,
     showReferenceLine,
     referenceLinePoint,
     referenceLineColor,
     referenceLineDashed,
     lowerValueLabel,
-    highValueLabel
+    highValueLabel,
+    showLegend,
+    legendData
   } = props;
   const controlsContainerRef = (0, _react.useRef)();
   const displayFormattedValue = value => {
@@ -83,13 +85,18 @@ const BarChartTwoRows = props => {
         }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LabelBoldText, {
           textAnchor: "middle",
           x: "0",
-          dy: "50",
+          dy: "30",
           fontSize: 16,
           fontWeight: 600
-        }, payload.value), /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LabelText, {
+        }, payload.value)), /*#__PURE__*/_react.default.createElement("text", {
+          x: 0,
+          y: 0,
+          dy: 16,
+          fill: "#212121"
+        }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LabelText, {
           textAnchor: "middle",
           x: "0",
-          dy: "30",
+          dy: "50",
           fontSize: 14,
           fontWeight: 400
         }, retailerData[0].date)));
@@ -110,7 +117,7 @@ const BarChartTwoRows = props => {
       y: y,
       dy: -8,
       fill: stroke,
-      fontSize: "0.6em",
+      fontSize: barFontSizeValue,
       textAnchor: "middle"
     }, displayFormattedValue(value));
   };
@@ -119,18 +126,20 @@ const BarChartTwoRows = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Controls, null, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Title, null, title), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
-    width: "100%",
-    height: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Controls, {
+    className: "Controls"
+  }, title !== '' && /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Title, null, title), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+    height: barChartHeight
   }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
     width: width,
     height: height,
     data: barChartData,
+    maxBarSize: 60,
     margin: {
       top: 20,
       right: 0,
-      bottom: 0,
-      left: -5
+      left: 0,
+      bottom: 20
     }
   }, showReferenceLine && /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
     y: referenceLinePoint,
@@ -140,9 +149,9 @@ const BarChartTwoRows = props => {
     dataKey: "title",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: 120,
-    stroke: "#D0D0D0",
-    interval: 0
+    height: 80,
+    interval: 0,
+    stroke: "#D0D0D0"
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
@@ -168,6 +177,27 @@ exports.BarChartTwoRows = BarChartTwoRows;
 var _default = exports.default = BarChartTwoRows;
 BarChartTwoRows.defaultProps = {
   title: 'String',
+  width: '100%',
+  height: '100%',
+  barChartHeight: 250,
+  barSize: 60,
+  barFontSizeValue: '0.6em',
+  barChartColorFirst: '#BD9EFF',
+  barChartColorSecond: '#0b00aaF',
+  showDollarSign: true,
+  isDollar: true,
+  showReferenceLine: false,
+  referenceLinePoint: 0,
+  referenceLineColor: '#212121',
+  referenceLineDashed: '5',
+  lowerValueLabel: 'Lower Value:',
+  highValueLabel: 'High Value:',
+  showLegend: true,
+  legendData: [{
+    title: 'Incremental Sales',
+    iconType: ICON_TYPE_SQUARE,
+    iconColor: '#BD9EFF'
+  }],
   barChartData: [{
     title: 'Food Lion',
     date: '15.01.24-31.01.24',
@@ -188,24 +218,5 @@ BarChartTwoRows.defaultProps = {
     title: 'Stop&Shop',
     date: '15.01.24-31.01.24',
     value: 415317
-  }],
-  width: '100%',
-  height: '100%',
-  barSize: 60,
-  barChartColorFirst: '#BD9EFF',
-  barChartColorSecond: '#0b00aaF',
-  showDollarSign: true,
-  isDollar: true,
-  showLegend: true,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: ICON_TYPE_SQUARE,
-    iconColor: '#BD9EFF'
-  }],
-  showReferenceLine: false,
-  referenceLinePoint: 0,
-  referenceLineColor: '#212121',
-  referenceLineDashed: '5',
-  lowerValueLabel: 'Lower Value:',
-  highValueLabel: 'High Value:'
+  }]
 };

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

@@ -7,19 +7,45 @@ Object.defineProperty(exports, "__esModule", {
 exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.Title = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  position: relative;
   font-family: "Poppins", sans-serif;
-  color: #212121;
   width: ${props => props.width};
   height: ${props => props.height};
-  min-width: 250px;
+  border-radius: 12px;
+  align-self: center;
+  &.NoData {
+    align-self: center;
+    display: flex;
+    align-items: center;
+    width: 50%;
+    margin: 10% auto 0;
+  }
+  > * {
+    box-sizing: border-box;
+  }
 `;
 const Controls = exports.Controls = _styledComponents.default.div`
   height: 100%;
   width: 100%;
+  padding: 24px 40px;
   background: white;
   display: flex;
   flex-direction: column;
+  @media (max-width: 1536px) {
+    padding: 12px 32px;
+  }
+`;
+const Title = exports.Title = _styledComponents.default.span`
+  color: #212121;
+  display: inline-block;
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: auto;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
 `;
 const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div`
   border-radius: 5px;
@@ -40,19 +66,6 @@ const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div`
   font-size: 14px;
   font-weight: 600;
 `;
-const Title = exports.Title = _styledComponents.default.h5`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 20px;
-  margin: 0 0 30px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-    margin: 0 0 20px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
 const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan`
   font-size: 0.7em;
 `;

package/dist/stories/components/CommonFunctions.js

@@ -59,7 +59,7 @@ const getFormattedValue = num => {
   if (Math.abs(num) >= 1000) {
     return (num / 1000).toFixed(1).replace(/\.0$/, '');
   }
-  return Number(num).toFixed(1);
+  return Number(num) % 1 === 0 ? num : Number(num).toFixed(1);
 };
 exports.getFormattedValue = getFormattedValue;
 const getNumberWithCommas = x => {

package/dist/stories/components/SingleBarLineCharts.js

@@ -23,21 +23,25 @@ const SingleBarLineCharts = props => {
     width,
     height,
     title,
+    data,
+    totalsData,
+    showLegend,
+    legendData,
+    maxBarRange,
+    lineRange,
+    lineFontSizeValue,
+    barFontSizeValue,
     barSize,
-    maxRange,
     barChartHeight,
     lineChartHeight,
-    showSecondBar,
     isLineChartCurrency,
     isLineChartBolded,
     setLineChartTooltip,
     isTopBarPercent,
+    showSecondBar,
     showPeriod,
     currencySignLine,
     currencySign,
-    data,
-    totalsData,
-    legendData,
     noDataText
   } = props;
   const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
@@ -92,7 +96,7 @@ const SingleBarLineCharts = props => {
         x: x + width / 2,
         y: y - radius,
         fontWeight: 400,
-        fontSize: "0.6em",
+        fontSize: barChartHeight,
         textAnchor: "middle"
       }, "0"));
     }
@@ -101,7 +105,7 @@ const SingleBarLineCharts = props => {
         x: x + width / 2,
         y: y - radius,
         fontWeight: 400,
-        fontSize: "0.6em",
+        fontSize: barChartHeight,
         textAnchor: "middle",
         dominantBaseline: "middle"
       }, "N/A"));
@@ -110,7 +114,7 @@ const SingleBarLineCharts = props => {
       x: x + width / 2,
       y: y - radius,
       fontWeight: 400,
-      fontSize: "0.6em",
+      fontSize: barChartHeight,
       textAnchor: "middle",
       dominantBaseline: "middle"
     }, `${currencySign}${(0, _CommonFunctions.getFormattedValue)(value)}${(0, _CommonFunctions.getFormattedUnits)(value)}${isTopBarPercent ? '%' : ''}`));
@@ -150,7 +154,7 @@ const SingleBarLineCharts = props => {
           textAnchor: "middle",
           x: "0",
           dy: "30",
-          fontWeight: 500
+          fontWeight: 600
         }, retailerData[0].retailer)), showPeriod && /*#__PURE__*/_react.default.createElement("text", {
           x: 0,
           y: 0,
@@ -181,7 +185,7 @@ const SingleBarLineCharts = props => {
       dy: -8,
       fill: stroke,
       fontWeight: isLineChartBolded ? 600 : 400,
-      fontSize: "0.6em",
+      fontSize: lineFontSizeValue,
       textAnchor: "middle"
     }, `${isLineChartCurrency ? currencySignLine : ''}${(0, _CommonFunctions.getFormattedValue)(value)}${(0, _CommonFunctions.getFormattedUnits)(value)}`);
   };
@@ -209,15 +213,15 @@ const SingleBarLineCharts = props => {
     data: data,
     margin: {
       top: 20,
-      right: 100,
-      left: 100,
-      bottom: 10
+      right: 80,
+      left: 80,
+      bottom: 20
     }
   }, /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
     type: "number",
     width: 0,
     display: "none",
-    domain: ['auto', dataMax => dataMax * maxRange],
+    domain: [dataMin => dataMin / lineRange, dataMax => dataMax * lineRange],
     allowDataOverflow: true
   }), /*#__PURE__*/_react.default.createElement(_recharts.Line, {
     type: "monotone",
@@ -235,24 +239,29 @@ const SingleBarLineCharts = props => {
     data: data,
     maxBarSize: 60,
     margin: {
-      top: 30,
-      right: 30,
-      left: 30,
-      bottom: 5
+      top: 20,
+      right: 0,
+      left: 0,
+      bottom: 20
     }
   }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
     dataKey: "retailer",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: 120,
+    height: 80,
     interval: 0,
     fill: "#212121"
   }), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
     type: "number",
     width: 0,
     display: "none",
-    domain: ['auto', dataMax => dataMax * maxRange],
-    allowDataOverflow: true
+    allowDataOverflow: true,
+    domain: ['auto', dataMax => {
+      if (String(dataMax) === '-Infinity') {
+        return 0;
+      }
+      return dataMax * maxBarRange;
+    }]
   }), /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
     y: 0,
     stroke: "#D0D0D0"
@@ -276,7 +285,7 @@ const SingleBarLineCharts = props => {
     fill: "#212121",
     dataKey: "secondBarValue",
     content: CustomizedLabelBarchart
-  })))), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
+  })))), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.PerformanceAnalyticsLegend, {
     legendData: legendData
   })) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
@@ -286,9 +295,17 @@ exports.SingleBarLineCharts = SingleBarLineCharts;
 var _default = exports.default = SingleBarLineCharts;
 SingleBarLineCharts.defaultProps = {
   className: '',
-  title: '',
   width: '100%',
   height: '100%',
+  title: '',
+  data: [],
+  totalsData: [],
+  showLegend: true,
+  legendData: [],
+  maxBarRange: 1,
+  lineRange: 1,
+  lineFontSizeValue: '0.6em',
+  barFontSizeValue: '0.6em',
   barSize: 60,
   barChartHeight: 250,
   lineChartHeight: 50,
@@ -296,13 +313,9 @@ SingleBarLineCharts.defaultProps = {
   isLineChartBolded: false,
   setLineChartTooltip: false,
   isTopBarPercent: true,
-  maxRange: 1,
+  showSecondBar: true,
   showPeriod: true,
   currencySign: '€',
   currencySignLine: '€',
-  showSecondBar: true,
-  data: [],
-  totalsData: [],
-  legendData: [],
   noDataText: 'No data'
 };

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

@@ -26,22 +26,30 @@ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.
     box-sizing: border-box;
   }
 `;
-const Title = exports.Title = _styledComponents.default.span`
-  color: black;
-  display: inline-block;
-  font-size: 18px;
-  font-weight: 400;
-  margin-bottom: 12px;
-`;
 const Controls = exports.Controls = _styledComponents.default.div`
   width: 100%;
   height: 100%;
   padding: 24px 40px;
   background: white;
+  display: flex;
+  flex-direction: column;
   @media (max-width: 1536px) {
     padding: 12px 32px;
   }
 `;
+const Title = exports.Title = _styledComponents.default.span`
+  color: #212121;
+  display: inline-block;
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: auto;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
 const LinnerDataBoxWrap = exports.LinnerDataBoxWrap = (0, _styledComponents.default)(_LinnerDataBox.LinnerDataBox)`
     padding: 0 0 16px;
     .vertival-line {

package/package.json

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