mario-education 2.4.460-release → 2.4.462-release

package/dist/containers/QuestionBank/hooks/useQuestionDetail.d.ts

@@ -44,5 +44,8 @@ declare const useQuestionDetail: (id?: number | undefined, type?: number | undef
     listLanguage: any;
     activeLanguage: string;
     onChangeLanguage: (code: string) => void;
+    modelQuestionLang: QuestionDetail[];
+    setModelQuestionLang: import("react").Dispatch<import("react").SetStateAction<QuestionDetail[]>>;
+    handleValidateForm: (onValidate: Function, setErrors: Function) => Promise<boolean>;
 };
 export default useQuestionDetail;

package/dist/index.js

@@ -183,6 +183,65 @@ function _forTo(array, body, check) {
 
 const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
 
+// Asynchronously iterate through an object's values
+// Uses for...of if the runtime supports it, otherwise iterates until length on a copy
+function _forOf(target, body, check) {
+	if (typeof target[_iteratorSymbol] === "function") {
+		var iterator = target[_iteratorSymbol](), step, pact, reject;
+		function _cycle(result) {
+			try {
+				while (!(step = iterator.next()).done && (!check || !check())) {
+					result = body(step.value);
+					if (result && result.then) {
+						if (_isSettledPact(result)) {
+							result = result.v;
+						} else {
+							result.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));
+							return;
+						}
+					}
+				}
+				if (pact) {
+					_settle(pact, 1, result);
+				} else {
+					pact = result;
+				}
+			} catch (e) {
+				_settle(pact || (pact = new _Pact()), 2, e);
+			}
+		}
+		_cycle();
+		if (iterator.return) {
+			var _fixup = function(value) {
+				try {
+					if (!step.done) {
+						iterator.return();
+					}
+				} catch(e) {
+				}
+				return value;
+			};
+			if (pact && pact.then) {
+				return pact.then(_fixup, function(e) {
+					throw _fixup(e);
+				});
+			}
+			_fixup();
+		}
+		return pact;
+	}
+	// No support for Symbol.iterator
+	if (!("length" in target)) {
+		throw new TypeError("Object is not iterable");
+	}
+	// Handle live collections properly
+	var values = [];
+	for (var i = 0; i < target.length; i++) {
+		values.push(target[i]);
+	}
+	return _forTo(values, function(i) { return body(values[i]); }, check);
+}
+
 const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
 
 // Asynchronously implement a generic for loop
@@ -15975,6 +16034,10 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
       activeLanguage = _useState4[0],
       setActiveLanguage = _useState4[1];
 
+  var _useState5 = React.useState([]),
+      modelQuestionLang = _useState5[0],
+      setModelQuestionLang = _useState5[1];
+
   var setEditedTrue = function setEditedTrue() {
     try {
       localStorage.setItem(window.location.href, "true");
@@ -15985,13 +16048,13 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
     }
   };
 
-  var _useState5 = React.useState(initialLabelQuestions),
-      labelQuestions = _useState5[0],
-      setLabelQuestions = _useState5[1];
+  var _useState6 = React.useState(initialLabelQuestions),
+      labelQuestions = _useState6[0],
+      setLabelQuestions = _useState6[1];
 
-  var _useState6 = React.useState(""),
-      tinyMCEKey = _useState6[0],
-      setTinyMCEKey = _useState6[1];
+  var _useState7 = React.useState(""),
+      tinyMCEKey = _useState7[0],
+      setTinyMCEKey = _useState7[1];
 
   var getMinIdCategory = function getMinIdCategory(categories) {
     var sortedCategory = categories.sort(function (c1, c2) {
@@ -16001,15 +16064,49 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
     return (firstCategory === null || firstCategory === void 0 ? void 0 : firstCategory.id) || 1;
   };
 
+  var handleValidateForm = function handleValidateForm(onValidate, setErrors) {
+    try {
+      var _exit2 = false;
+      var formLanguageModelCreate = modelQuestionLang.filter(function (r) {
+        var _listLanguage$;
+
+        return r.text || r.lang == ((_listLanguage$ = listLanguage[0]) === null || _listLanguage$ === void 0 ? void 0 : _listLanguage$.code);
+      }) || [];
+
+      var _temp2 = _forOf(formLanguageModelCreate, function (form) {
+        return Promise.resolve(onValidate(form)).then(function (errors) {
+          console.log({
+            errors: errors
+          });
+
+          if (Object.keys(errors).length > 0) {
+            setActiveLanguage(form.lang);
+            setErrors(_extends({}, errors));
+            _exit2 = true;
+            return false;
+          }
+        });
+      }, function () {
+        return _exit2;
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function (_result) {
+        return _exit2 ? _result : true;
+      }) : _exit2 ? _temp2 : true);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
   var getTinyMCEKey = function getTinyMCEKey() {
     try {
-      var _temp3 = function _temp3() {
+      var _temp5 = function _temp5() {
         dispatch(marioCore.setLoading(false));
       };
 
       dispatch(marioCore.setLoading(true));
 
-      var _temp4 = _catch(function () {
+      var _temp6 = _catch(function () {
         return Promise.resolve(getTinyMCEKeyApi()).then(function (res) {
           var data = res.data;
 
@@ -16026,7 +16123,7 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
         }));
       });
 
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -16034,13 +16131,13 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
 
   var getQuestionCategories = function getQuestionCategories() {
     try {
-      var _temp7 = function _temp7() {
+      var _temp9 = function _temp9() {
         dispatch(marioCore.setLoading(false));
       };
 
       dispatch(marioCore.setLoading(true));
 
-      var _temp8 = _catch(function () {
+      var _temp10 = _catch(function () {
         return Promise.resolve(get$i()).then(function (res) {
           var items = res.data.items;
           var categoryId = getMinIdCategory(items);
@@ -16057,7 +16154,7 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
         }));
       });
 
-      return Promise.resolve(_temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8));
+      return Promise.resolve(_temp10 && _temp10.then ? _temp10.then(_temp9) : _temp9(_temp10));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -16065,15 +16162,24 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
 
   var getLanguageSystems = function getLanguageSystems() {
     try {
-      var _temp11 = function _temp11() {
+      var _temp13 = function _temp13() {
         dispatch(marioCore.setLoading(false));
       };
 
       dispatch(marioCore.setLoading(true));
 
-      var _temp12 = _catch(function () {
+      var _temp14 = _catch(function () {
         return Promise.resolve(getLanguages()).then(function (res) {
           setListLanguage(res.data);
+          var modelQuestion = res.data.map(function (r) {
+            var _r$code;
+
+            return _extends({}, initValue$f, {
+              lang: (_r$code = r.code) != null ? _r$code : "",
+              isSurvey: type === TYPE_QUESTION.Default
+            });
+          });
+          setModelQuestionLang(modelQuestion != null ? modelQuestion : []);
         });
       }, function (err) {
         var _err$response3, _err$response3$data;
@@ -16084,7 +16190,7 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
         }));
       });
 
-      return Promise.resolve(_temp12 && _temp12.then ? _temp12.then(_temp11) : _temp11(_temp12));
+      return Promise.resolve(_temp14 && _temp14.then ? _temp14.then(_temp13) : _temp13(_temp14));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -16109,13 +16215,13 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
 
   var getData = function getData(lang) {
     try {
-      var _temp15 = function _temp15() {
+      var _temp17 = function _temp17() {
         dispatch(marioCore.setLoading(false));
       };
 
       dispatch(marioCore.setLoading(true));
 
-      var _temp16 = _catch(function () {
+      var _temp18 = _catch(function () {
         var objLang = {
           lang: lang
         };
@@ -16146,7 +16252,7 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
         }));
       });
 
-      return Promise.resolve(_temp16 && _temp16.then ? _temp16.then(_temp15) : _temp15(_temp16));
+      return Promise.resolve(_temp18 && _temp18.then ? _temp18.then(_temp17) : _temp17(_temp18));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -16159,19 +16265,85 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
   var backToList = React.useCallback(function () {
     history.goBack();
   }, [questionDetail]);
+  var handleCreateQuestion = React.useCallback(function (_data, _type) {
+    try {
+      var _exit4 = false;
+
+      var _temp22 = function _temp22(_result2) {
+        if (_exit4) return _result2;
+        dispatch(marioCore.setLoading(false));
+      };
+
+      dispatch(marioCore.setLoading(true));
+
+      var _temp23 = _catch(function () {
+        var formLanguageModelCreate = modelQuestionLang.filter(function (r) {
+          var _listLanguage$2;
+
+          return r.text || r.lang == ((_listLanguage$2 = listLanguage[0]) === null || _listLanguage$2 === void 0 ? void 0 : _listLanguage$2.code);
+        }) || [];
+        console.log({
+          formLanguageModelCreate: formLanguageModelCreate
+        });
+        console.log({
+          modelQuestionLang: modelQuestionLang
+        });
+
+        for (var _iterator = _createForOfIteratorHelperLoose(formLanguageModelCreate), _step; !(_step = _iterator()).done;) {
+          var form = _step.value;
+          var validator = validationChoices(form);
+          if (validator.isError) throw new Error(validator.message);
+        }
+
+        var questionCreateEng = modelQuestionLang.find(function (r) {
+          var _listLanguage$3;
+
+          return r.lang == ((_listLanguage$3 = listLanguage[0]) === null || _listLanguage$3 === void 0 ? void 0 : _listLanguage$3.code);
+        });
+        if (!questionCreateEng) throw new Error("Create question fail");
+        questionCreateEng = validationAnswerId(questionCreateEng);
+        return Promise.resolve(create$2(questionCreateEng, type || 0)).then(function (res) {
+          if (!res.data) throw new Error("Create question fail");
+
+          var _temp19 = _forOf(formLanguageModelCreate.filter(function (r) {
+            var _listLanguage$4;
+
+            return r.lang != ((_listLanguage$4 = listLanguage[0]) === null || _listLanguage$4 === void 0 ? void 0 : _listLanguage$4.code);
+          }), function (form) {
+            form.id = res.data.id;
+            form = validationAnswerId(form);
+            return Promise.resolve(update$2(form, type || 0)).then(function () {});
+          });
+
+          if (_temp19 && _temp19.then) return _temp19.then(function () {});
+        });
+      }, function (err) {
+        var _err$response5, _err$response5$data;
+
+        dispatch(marioCore.setAlert({
+          type: "danger",
+          message: ((_err$response5 = err.response) === null || _err$response5 === void 0 ? void 0 : (_err$response5$data = _err$response5.data) === null || _err$response5$data === void 0 ? void 0 : _err$response5$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp23 && _temp23.then ? _temp23.then(_temp22) : _temp22(_temp23));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [modelQuestionLang]);
   var confirmData = React.useCallback(function (data) {
     try {
-      var _exit2 = false;
+      var _exit6 = false;
 
-      var _temp19 = function _temp19(_result) {
-        if (_exit2) return _result;
+      var _temp26 = function _temp26(_result3) {
+        if (_exit6) return _result3;
         dispatch(marioCore.setLoading(false));
       };
 
       dispatch(marioCore.setLoading(true));
 
-      var _temp20 = _catch(function () {
-        var next = !!id ? update$2 : create$2;
+      var _temp27 = _catch(function () {
+        var next = !!id ? update$2 : handleCreateQuestion;
         var validator = validationChoices(data);
         if (validator.isError) throw new Error(validator.message);
         data.lang = activeLanguage;
@@ -16184,28 +16356,28 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
           !id && backToList();
         });
       }, function (err) {
-        var _err$response5, _err$response5$data;
+        var _err$response6, _err$response6$data;
 
         dispatch(marioCore.setAlert({
           type: "danger",
-          message: ((_err$response5 = err.response) === null || _err$response5 === void 0 ? void 0 : (_err$response5$data = _err$response5.data) === null || _err$response5$data === void 0 ? void 0 : _err$response5$data.title) || err.message
+          message: ((_err$response6 = err.response) === null || _err$response6 === void 0 ? void 0 : (_err$response6$data = _err$response6.data) === null || _err$response6$data === void 0 ? void 0 : _err$response6$data.title) || err.message
         }));
       });
 
-      return Promise.resolve(_temp20 && _temp20.then ? _temp20.then(_temp19) : _temp19(_temp20));
+      return Promise.resolve(_temp27 && _temp27.then ? _temp27.then(_temp26) : _temp26(_temp27));
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [id, activeLanguage]);
+  }, [id, activeLanguage, modelQuestionLang]);
   var handleGetLabelQuestions = React.useCallback(function (questionType) {
     try {
-      var _temp23 = function _temp23() {
+      var _temp30 = function _temp30() {
         dispatch(marioCore.setLoading(false));
       };
 
       dispatch(marioCore.setLoading(true));
 
-      var _temp24 = _catch(function () {
+      var _temp31 = _catch(function () {
         return Promise.resolve(getLabelQuestions({
           isDefaultSurvey: true,
           questionType: questionType
@@ -16213,15 +16385,15 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
           setLabelQuestions(res.data);
         });
       }, function (err) {
-        var _err$response6, _err$response6$data;
+        var _err$response7, _err$response7$data;
 
         dispatch(marioCore.setAlert({
           type: "danger",
-          message: ((_err$response6 = err.response) === null || _err$response6 === void 0 ? void 0 : (_err$response6$data = _err$response6.data) === null || _err$response6$data === void 0 ? void 0 : _err$response6$data.title) || err.message
+          message: ((_err$response7 = err.response) === null || _err$response7 === void 0 ? void 0 : (_err$response7$data = _err$response7.data) === null || _err$response7$data === void 0 ? void 0 : _err$response7$data.title) || err.message
         }));
       });
 
-      return Promise.resolve(_temp24 && _temp24.then ? _temp24.then(_temp23) : _temp23(_temp24));
+      return Promise.resolve(_temp31 && _temp31.then ? _temp31.then(_temp30) : _temp30(_temp31));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -16242,7 +16414,10 @@ var useQuestionDetail$1 = function useQuestionDetail(id, type) {
     tinyMCEKey: tinyMCEKey,
     listLanguage: listLanguage,
     activeLanguage: activeLanguage,
-    onChangeLanguage: onChangeLanguage
+    onChangeLanguage: onChangeLanguage,
+    modelQuestionLang: modelQuestionLang,
+    setModelQuestionLang: setModelQuestionLang,
+    handleValidateForm: handleValidateForm
   };
 };
 
@@ -16323,16 +16498,19 @@ var QuestionDetail = function QuestionDetail() {
       tinyMCEKey = _useQuestionDetail.tinyMCEKey,
       listLanguage = _useQuestionDetail.listLanguage,
       activeLanguage = _useQuestionDetail.activeLanguage,
-      onChangeLanguage = _useQuestionDetail.onChangeLanguage;
+      onChangeLanguage = _useQuestionDetail.onChangeLanguage,
+      modelQuestionLang = _useQuestionDetail.modelQuestionLang,
+      setModelQuestionLang = _useQuestionDetail.setModelQuestionLang,
+      handleValidateForm = _useQuestionDetail.handleValidateForm;
 
   var TINY_MCE_API_KEY = "ebwt07xgrus9j0kd8gq1k89muft26xih8aivb0ridjv7c216";
   var header = !!id ? t(EDIT_QUESTION_HEADER) : t(CREATE_QUESTION_HEADER);
   var confirmText = !!id ? t("update") : t("create");
   var additionalFields = ["fromLabel", "toLabel", "numberOfStars"];
-  console.log({
-    tinyMCEKey: tinyMCEKey
+  var activeModelLanguage = modelQuestionLang.find(function (r) {
+    return r.lang == activeLanguage;
   });
-  return React__default.createElement(React__default.Fragment, null, !!id && React__default.createElement(reactstrap.Nav, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(reactstrap.Nav, {
     tabs: true,
     className: "mb-3"
   }, listLanguage && listLanguage.length > 0 && listLanguage.map(function (item) {
@@ -16343,7 +16521,8 @@ var QuestionDetail = function QuestionDetail() {
       }
     }, item.name));
   })), React__default.createElement(formik.Formik, {
-    initialValues: questionDetail,
+    key: activeLanguage,
+    initialValues: !id && !!activeModelLanguage ? activeModelLanguage : questionDetail,
     enableReinitialize: true,
     validationSchema: schema$a,
     onSubmit: function onSubmit(values) {
@@ -16362,7 +16541,9 @@ var QuestionDetail = function QuestionDetail() {
         touched = formikProps.touched,
         errors = formikProps.errors,
         setFieldValue = formikProps.setFieldValue,
-        handleSubmit = formikProps.handleSubmit;
+        handleSubmit = formikProps.handleSubmit,
+        validateForm = formikProps.validateForm,
+        setErrors = formikProps.setErrors;
 
     var onChangeQuestionType = function onChangeQuestionType(e) {
       if (![marioCore.QUESTION_TYPES.EMOTIONAL, marioCore.QUESTION_TYPES.LEARNING_STRATEGY, marioCore.QUESTION_TYPES.RATING, marioCore.QUESTION_TYPES.SUMMARIZE, marioCore.QUESTION_TYPES.TEXT_INPUT, marioCore.QUESTION_TYPES.DROPDOWN].includes(e.value)) {
@@ -16394,6 +16575,24 @@ var QuestionDetail = function QuestionDetail() {
       setEditedTrue();
     };
 
+    React.useEffect(function () {
+      if (!id && !!activeModelLanguage && activeModelLanguage.lang == activeLanguage && (activeModelLanguage.answers != values.answers || activeModelLanguage.text != values.text || activeModelLanguage.type != values.type || activeModelLanguage.fromLabel != values.fromLabel || activeModelLanguage.toLabel != values.toLabel)) {
+        var categoryId = values.categoryId != 0 ? values.categoryId : questionDetail.categoryId;
+        var updatedModelQuestionLang = modelQuestionLang.map(function (item) {
+          return item.lang === activeLanguage ? _extends({}, item, values, {
+            categoryId: categoryId
+          }) : _extends({}, item, {
+            type: values.type,
+            categoryId: categoryId,
+            isMandatory: values.isMandatory,
+            isQuestionIntervention: values.isQuestionIntervention,
+            isBeforeSession: values.isBeforeSession,
+            userForQuestion: values.userForQuestion
+          });
+        });
+        setModelQuestionLang(updatedModelQuestionLang);
+      }
+    }, [values, id, activeModelLanguage, modelQuestionLang, activeLanguage]);
     return React__default.createElement("div", {
       className: "animated fadeIn detail-buttons-padding"
     }, React__default.createElement(marioCore.QuitPrompt, {
@@ -16442,9 +16641,9 @@ var QuestionDetail = function QuestionDetail() {
       className: styles["form-question-text"] + " mb-2"
     }, React__default.createElement(marioCore.RequiredLabel, {
       text: t("question_text")
-    }), (questionDetail.text || !id) && !!tinyMCEKey && React__default.createElement(tinymceReact.Editor, {
+    }), (values.text || !id) && !!tinyMCEKey && React__default.createElement(tinymceReact.Editor, {
       apiKey: tinyMCEKey || TINY_MCE_API_KEY,
-      value: questionDetail.text,
+      value: values.text,
       init: _extends({}, marioCore.editorConfig.question, {
         paste_preprocess: function paste_preprocess(_plugin, args) {
           args.content = args.content.replace(/<\/?(?!b\b|p\b)[^>]+>/g, "");
@@ -16507,7 +16706,29 @@ var QuestionDetail = function QuestionDetail() {
       }) : null;
     }), React__default.createElement(marioCore.DetailActionButtons, {
       confirmText: confirmText,
-      onConfirm: handleSubmit,
+      onConfirm: function () {
+        try {
+          var _exit2 = false;
+
+          var _temp3 = function _temp3(_result) {
+            if (_exit2) return _result;
+            handleSubmit();
+          };
+
+          var _temp4 = function () {
+            if (!id) {
+              return Promise.resolve(handleValidateForm(validateForm, setErrors)).then(function (isPass) {
+                if (isPass) handleSubmit();
+                _exit2 = true;
+              });
+            }
+          }();
+
+          return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      },
       onCancel: backToList
     }));
   }));
@@ -34054,7 +34275,7 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
               var tooltipHeight = ((_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.value.length) * lineHeight;
               var widthLabel = 69;
               var isScrollStudents = tooltipHeight + 30 > chartHeight - 100 - (isMobileScreen ? widthLabel : 0);
-              if (isScrollStudents) circle.addEventListener("click", handleDotLeave);else circle.addEventListener("mouseleave", handleDotLeave);
+              if (isScrollStudents) circle.addEventListener("click", handleDotLeave);
               svg.appendChild(circle);
               var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
               text.setAttribute("x", "" + circleX);
@@ -34071,7 +34292,7 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
 
                 handleDotHover((_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : _data5.value, circleX, circleY, (_data6 = data[i - 1]) === null || _data6 === void 0 ? void 0 : _data6.label, colors[i - 1]);
               });
-              if (isScrollStudents) text.addEventListener("click", handleDotLeave);else text.addEventListener("mouseleave", handleDotLeave);
+              if (isScrollStudents) text.addEventListener("click", handleDotLeave);
               svg.appendChild(text);
               var label = t((_data7 = data[i - 1]) === null || _data7 === void 0 ? void 0 : _data7.label).toUpperCase();
               var tooltip = t((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.tooltip);
@@ -34146,11 +34367,27 @@ var StudentPressureChart = function StudentPressureChart(_ref) {
   var isScrollStudents = tooltipHeight + 30 > chartHeight - 100 - (isMobileScreen ? widthLabel : 0);
   var maxHeightTooltip = isScrollStudents ? chartHeight - 100 - (isMobileScreen ? widthLabel : 0) : tooltipHeight + 30;
   var heightInfoTooltip = 64;
+  var tooltipRef = React.useRef(null);
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      var _tooltipRef$current;
+
+      if (tooltipRef.current && !((_tooltipRef$current = tooltipRef.current) !== null && _tooltipRef$current !== void 0 && _tooltipRef$current.contains(event.target))) {
+        handleDotLeave();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
   return React__default.createElement("svg", {
     ref: svgRef,
     width: chartWidth,
     height: chartHeight + 50
   }, !!tooltipVisible && React__default.createElement("g", {
+    ref: tooltipRef,
     transform: "translate(" + (infoTooltip ? tooltipX - 81 : tooltipX - 100) + "," + Math.max(0, infoTooltip ? tooltipY - heightInfoTooltip - 30 : isMobileScreen ? tooltipY - tooltipHeight - 100 - widthLabel : tooltipY - tooltipHeight - 100) + ")"
   }, React__default.createElement("rect", {
     width: infoTooltip ? 162 : 200,