@evergis/charts 2.0.17 → 2.0.21

package/dist/charts.esm.js

@@ -2224,8 +2224,18 @@ const drawLines = (_ref) => {
   };
 };
 
+function _templateObject2$4() {
+  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    z-index: 1;\n    transition: all linear 144ms;\n\n    .", " {\n      margin-bottom: 4px;\n      :last-of-type {\n        margin-bottom: 0;\n      }\n    }\n  }\n"]);
+
+  _templateObject2$4 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject$a() {
-  const data = _taggedTemplateLiteralLoose(["\n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n  .", ",\n    .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n  .", " {\n  }\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n  .", " {\n    z-index: 1;\n  }\n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  .", " {\n    shape-rendering: auto;\n  }\n  .", " {\n    fill-opacity: 0.24;\n  }\n  .", " {\n    margin-bottom: 4px;\n    :last-of-type {\n      margin-bottom: 0;\n    }\n  }\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  line {\n    stroke-width: 1px;\n    shape-rendering: crispEdges;\n  }\n  .", ",\n    .", " {\n    stroke: rgba(48, 69, 79, 0.06);\n  }\n  .", " {\n  }\n  .", " {\n    fill: none;\n    pointer-events: all;\n  }\n  .", " {\n    stroke-width: 1.5px;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n  }\n  .", " {\n    shape-rendering: auto;\n  }\n  .", " {\n    fill-opacity: 0.24;\n  }\n"]);
 
   _templateObject$a = function _templateObject() {
     return data;
@@ -2264,7 +2274,8 @@ const barChartClassNames = /*#__PURE__*/_extends({
   barChartGridLineYZero: 'barChartGridLineYZero',
   barChartGridLineY: 'barChartGridLineY'
 }, tooltipClassnames, labelClassnames, barChartLinesClassNames);
-const SvgWrapper$4 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/_templateObject$a(), barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseTooltip, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea, barChartClassNames.barChartTooltipItem);
+const SvgWrapper$4 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/_templateObject$a(), barChartClassNames.barChartGridLineX, barChartClassNames.barChartGridLineY, barChartClassNames.barChartMouseRect, barChartClassNames.barChartMouseRect, barChartClassNames.barChartLinesGlobal, barChartClassNames.barChartLine, barChartClassNames.barChartArea);
+const TooltipStyles$1 = /*#__PURE__*/createGlobalStyle( /*#__PURE__*/_templateObject2$4(), barChartClassNames.barChartMouseTooltip, barChartClassNames.barChartTooltipItem);
 
 const drawGrid$1 = (_ref) => {
   let {
@@ -2449,7 +2460,9 @@ const drawTooltip$2 = (_ref) => {
     setTooltipPosition,
     onLabelItem,
     isBarTooltip,
-    bars
+    bars,
+    tooltipRoot,
+    tooltipClassName
   } = _ref;
   select(node).select("." + barChartClassNames.barChartMouseContainer).remove();
   const xScaleBandDomain = xScale.domain();
@@ -2482,19 +2495,21 @@ const drawTooltip$2 = (_ref) => {
   }, []);
   const mouseGlobal = svg.append('g').attr('class', 'lineChartMouseGlobal');
   const mouseRect = mouseGlobal.append('rect').attr('width', x2 - x1).attr('height', Math.abs(y1 - y2)).attr('class', barChartClassNames.barChartMouseRect).attr('transform', "translate(" + x1 + ", " + y2 + ")");
-  const container = select(node).append('div').attr('class', barChartClassNames.barChartMouseContainer);
 
   if (dynamicTooltipEnable) {
-    const tooltip = container.append('div').attr('class', barChartClassNames.barChartMouseTooltip).style('opacity', '0').style('position', 'absolute').html(() => {
-      const html = ReactDOMServer.renderToString(React.createElement(TooltipFlex, {
-        className: barChartClassNames.barChartTooltipFlex
-      }, React.createElement(TooltipContainer, {
-        className: barChartClassNames.barChartTooltip
-      })));
-      return html;
-    });
+    const tooltipContainer = tooltipRoot || document.querySelector('body');
+    let tooltip = select("." + barChartClassNames.barChartMouseTooltip);
+
+    if (tooltip.size() === 0) {
+      tooltip = select(tooltipContainer).append('div').attr('class', barChartClassNames.barChartMouseTooltip).style('opacity', '0').style('position', 'absolute').html(() => {
+        const html = ReactDOMServer.renderToString(React.createElement(TooltipFlex, {
+          className: barChartClassNames.barChartTooltipFlex
+        }));
+        return html;
+      });
+    }
+
     const barChartTootipFlex = tooltip.select("." + barChartClassNames.barChartTooltipFlex);
-    const barChartTooltip = tooltip.select("." + barChartClassNames.barChartTooltip);
     let isVisible = false;
     let flagCurrIndex = null;
 
@@ -2504,20 +2519,25 @@ const drawTooltip$2 = (_ref) => {
       tooltip.style('opacity', opacity);
 
       if (!isVisible) {
+        tooltip.attr('class', barChartClassNames.barChartMouseTooltip);
         flagCurrIndex = null;
         tooltip.style('transition', 'none');
         tooltip.style('top', null);
         tooltip.style('left', null);
       } else {
+        tooltip.attr('class', barChartClassNames.barChartMouseTooltip + " " + (tooltipClassName || ''));
         tooltip.style('transition', null);
       }
     };
 
     mouseRect.on('mouseout.tooltip', () => setVisible());
     mouseRect.on('touchmove.tooltip mousemove.tooltip', event => {
+      const [docX, docY] = pointer(event, document);
       const [rectrX] = pointer(event, mouseRect);
-      const [nodeX] = pointer(event, node);
+      const [nodeX, nodeY] = pointer(event, node);
       const x = rectrX - (rectrX - nodeX);
+      const offsetX = docX - nodeX;
+      const offsetY = docY - nodeY;
       const currIndex = groups.findIndex(value => x <= value);
 
       if (isBarTooltip) {
@@ -2537,8 +2557,8 @@ const drawTooltip$2 = (_ref) => {
         }
       }
 
-      const top = typeof tooltipY === 'number' ? tooltipY : topYDomain[currIndex] - y2;
-      const left = tooltipBind ? (xScale(currIndex.toString()) || 0) + bandwidth / 2 : x;
+      const top = (typeof tooltipY === 'number' ? tooltipY : topYDomain[currIndex] - y2) + offsetY;
+      const left = (tooltipBind ? (xScale(currIndex.toString()) || 0) + bandwidth / 2 : x) + offsetX;
 
       if (tooltipBind && flagCurrIndex === currIndex) {
         return;
@@ -2596,8 +2616,10 @@ const drawTooltip$2 = (_ref) => {
           setVisible(true);
         }
 
-        barChartTooltip.html(() => {
-          const html = ReactDOMServer.renderToString(React.createElement(React.Fragment, null, currData && currData[0] && React.createElement(TooltipGroupName, {
+        barChartTootipFlex.html(() => {
+          const html = ReactDOMServer.renderToString(React.createElement(TooltipContainer, {
+            className: barChartClassNames.barChartTooltip
+          }, currData && currData[0] && React.createElement(TooltipGroupName, {
             className: barChartClassNames.barChartTooltipGroupName
           }, currData[0].groupName), currData && currData.map((_ref5) => {
             let {
@@ -2641,6 +2663,7 @@ const drawTooltip$2 = (_ref) => {
     });
   }
 
+  const container = select(node).append('div').attr('class', barChartClassNames.barChartMouseContainer);
   const labelContainer = container.append('div').attr('class', barChartClassNames.barChartLabelContainer).style('position', 'absolute').style('top', y2 + "px");
 
   if (labelPosition) {
@@ -2772,7 +2795,9 @@ const draw$4 = (node, props) => {
     setTooltipPosition,
     onLabelItem,
     isBarTooltip,
-    xScaleItemWidth
+    xScaleItemWidth,
+    tooltipRoot,
+    tooltipClassName
   } = props;
 
   if (node !== null && data.length) {
@@ -2927,7 +2952,9 @@ const draw$4 = (node, props) => {
         setTooltipPosition,
         onLabelItem,
         isBarTooltip,
-        bars: groups
+        bars: groups,
+        tooltipRoot,
+        tooltipClassName
       });
     }
 
@@ -2958,7 +2985,7 @@ const BarChart = props => {
   return React.createElement("div", {
     className: className,
     style: style
-  }, React.createElement(SvgWrapper$4, {
+  }, React.createElement(TooltipStyles$1, null), React.createElement(SvgWrapper$4, {
     ref: ref
   }, children));
 };
@@ -3085,10 +3112,10 @@ function _templateObject3$2() {
   return data;
 }
 
-function _templateObject2$4() {
+function _templateObject2$5() {
   const data = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"]);
 
-  _templateObject2$4 = function _templateObject2() {
+  _templateObject2$5 = function _templateObject2() {
     return data;
   };
 
@@ -3127,7 +3154,7 @@ const horizontalBarChartClassNames = {
   horizontalBarChartTooltipValue: 'horizontalBarChartTooltipValue'
 };
 const Table = /*#__PURE__*/styled.table( /*#__PURE__*/_templateObject$b());
-const LabelCell = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$4());
+const LabelCell = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$5());
 const BarFlex = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject3$2());
 const BarsTd = /*#__PURE__*/styled.td( /*#__PURE__*/_templateObject4$2());
 const TooltipFlex$1 = /*#__PURE__*/styled(TooltipFlex)( /*#__PURE__*/_templateObject5$2());
@@ -3319,10 +3346,10 @@ function _templateObject3$3() {
   return data;
 }
 
-function _templateObject2$5() {
+function _templateObject2$6() {
   const data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 1rem;\n"]);
 
-  _templateObject2$5 = function _templateObject2() {
+  _templateObject2$6 = function _templateObject2() {
     return data;
   };
 
@@ -3339,7 +3366,7 @@ function _templateObject$d() {
   return data;
 }
 const TickTd = /*#__PURE__*/styled.td( /*#__PURE__*/_templateObject$d());
-const Ticks = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$5());
+const Ticks = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2$6());
 const Tick = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject3$3());
 
 const XScale = (_ref) => {
@@ -3497,10 +3524,10 @@ HorizontalBarChart.defaultProps = {
   withoutXScale: false
 };
 
-function _templateObject2$6() {
+function _templateObject2$7() {
   const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    position: absolute;\n    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);\n    pointer-events: none;\n    z-index: 1;\n  }\n"]);
 
-  _templateObject2$6 = function _templateObject2() {
+  _templateObject2$7 = function _templateObject2() {
     return data;
   };
 
@@ -3531,7 +3558,7 @@ const bubbleChartClassNames = {
   bubbleChartTip: 'bubbleChartTip'
 };
 const SvgWrapper$5 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/_templateObject$e(), bubbleChartClassNames.bubbleChartYAxis, bubbleChartClassNames.bubbleChartXAxis, bubbleChartClassNames.bubbleChartGridGlobal, bubbleChartClassNames.bubbleChartGridLineX, bubbleChartClassNames.bubbleChartGridLineY, bubbleChartClassNames.bubbleChartYScaleLabel);
-const TooltipStyles$1 = /*#__PURE__*/createGlobalStyle( /*#__PURE__*/_templateObject2$6(), bubbleChartClassNames.bubbleChartTooltipContainer);
+const TooltipStyles$2 = /*#__PURE__*/createGlobalStyle( /*#__PURE__*/_templateObject2$7(), bubbleChartClassNames.bubbleChartTooltipContainer);
 
 const drawGrid$2 = (_ref) => {
   let {
@@ -3813,7 +3840,7 @@ const BubbleChart = props => {
   return React.createElement("div", {
     className: className,
     style: style
-  }, React.createElement(TooltipStyles$1, null), React.createElement(SvgWrapper$5, {
+  }, React.createElement(TooltipStyles$2, null), React.createElement(SvgWrapper$5, {
     ref: ref
   }, children));
 };