sag_components 1.0.519 → 1.0.521

package/dist/stories/components/TotalDoughnutChart.js

@@ -40,9 +40,16 @@ const TotalDoughnutChart = props => {
       return;
     }
     let {
-      current
+      offsetWidth,
+      offsetHeight
     } = DoughnutChartContainerRef === null || DoughnutChartContainerRef === void 0 ? void 0 : DoughnutChartContainerRef.current;
-    console.log("DoughnutChartContainerRef 2", current);
+    offsetWidth = offsetWidth / 3;
+    offsetHeight = offsetHeight / 3;
+    console.log("DoughnutChartContainerRef 2", offsetWidth, offsetHeight);
+    const {
+      current
+    } = DoughnutChartContainerRef;
+    console.log("DoughnutChartContainerRef 3", current);
 
     // console.log(
     //   "DoughnutChartContainerRef 3",
@@ -61,12 +68,12 @@ const TotalDoughnutChart = props => {
     if (!current) {
       return;
     }
-    const DoughnutChartContainerWidth = current === null || current === void 0 ? void 0 : current.clientWidth;
-    const DoughnutChartContainerHeight = current === null || current === void 0 ? void 0 : current.clientHeight;
+    const DoughnutChartContainerWidth = current === null || current === void 0 ? void 0 : current.offsetWidth;
+    const DoughnutChartContainerHeight = current === null || current === void 0 ? void 0 : current.offsetHeight;
     console.log("DoughnutChartContainerRef 5", DoughnutChartContainerWidth, DoughnutChartContainerHeight);
     const radius = DoughnutChartContainerWidth > DoughnutChartContainerHeight ? DoughnutChartContainerHeight / 2 : DoughnutChartContainerWidth / 2;
     setDoughnutChartRadius(radius);
-  }, [height, width, DoughnutChartContainerRef]);
+  }, [height, width]);
 
   // useEffect(() => {
   //   console.log("DoughnutChartContainerRef 1", DoughnutChartContainerRef);
@@ -141,13 +148,12 @@ const TotalDoughnutChart = props => {
     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(_TotalDoughnutChart.DoughnutChart, {
-    id: "DoughnutChart",
+  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartContainer, {
+    id: "DoughnutChartContainer",
     width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+    height: height,
     ref: DoughnutChartContainerRef
-  }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, null, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
+  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, null, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
     fill: "#8884d8",
     dataKey: "value",
     blendStroke: true,

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

@@ -4,7 +4,7 @@ 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.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.DoughnutChartContainer = exports.DoughnutChartAndLegendContainer = 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;
@@ -19,7 +19,7 @@ const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedV
 const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
 const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  } \n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
 const DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: auto;\n  padding: 0 20px;\n"])));
-const DoughnutChart = exports.DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 45%;\n  flex-basis: 45%;\n  min-height: 6rem;\n"])));
+const DoughnutChartContainer = exports.DoughnutChartContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  //align-items: center;\n  position: relative; \n  min-width: 45%;\n  flex-basis: 45%;\n  min-height: 6rem;\n"])));
 const LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n"])));
 const LegendControlsContainer = exports.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"])));
 const LegendTitleAndFormatedValueContainer = exports.LegendTitleAndFormatedValueContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));

package/package.json

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