@evergis/charts 2.0.12 → 2.0.17

package/dist/charts.esm.js

@@ -1,5 +1,5 @@
 import styled, { css, createGlobalStyle } from 'styled-components';
-import React, { useState, useCallback, useRef, useEffect, useMemo, Fragment } from 'react';
+import React, { useState, useCallback, useMemo, useEffect, useRef, Fragment } from 'react';
 import { select, pointer, min, max, scaleLinear, lineRadial, curveLinearClosed, range as range$1, format, arc, pie, create, quantize, interpolate, interpolateRound, quantile, axisBottom, group, utcFormat, scaleSequential, interpolateGreens, utcYear, utcMonths, utcMonth, utcSunday, utcMonday, axisLeft, line, curveLinear, area, scaleBand, sum } from 'd3';
 import ReactDOMServer from 'react-dom/server';
 import { unmountComponentAtNode, render } from 'react-dom';
@@ -57,6 +57,42 @@ function _templateObject() {
 }
 const Wrapper = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject());
 
+function useNode() {
+  const [node, onSetNode] = useState(null);
+  const ref = useCallback(onSetNode, [onSetNode]);
+  return [ref, node];
+}
+
+function throttle(fn, wait) {
+  let isCalled = false;
+  return function () {
+    if (!isCalled) {
+      fn(...arguments);
+      isCalled = true;
+      setTimeout(function () {
+        isCalled = false;
+      }, wait);
+    }
+  };
+}
+
+const THROTTLE_DELAY = 44;
+const useResize = (width, callback, delay) => {
+  const throttledCallback = useMemo(() => {
+    return callback ? throttle(callback, delay || THROTTLE_DELAY) : undefined;
+  }, [callback, delay]);
+  useEffect(() => {
+    throttledCallback && typeof width !== 'number' && window.addEventListener('resize', throttledCallback);
+    return () => throttledCallback && window.removeEventListener('resize', throttledCallback);
+  }, [width, throttledCallback]);
+};
+
+const appendSvg = (node, width, height) => {
+  select(node).select('svg').remove();
+  const svg = select(node).append('svg').attr('width', width).attr('height', height);
+  return svg;
+};
+
 function _templateObject$1() {
   const data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  user-select: none;\n"]);
 
@@ -68,12 +104,6 @@ function _templateObject$1() {
 }
 const SwipeScrollContainer = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$1());
 
-function useNode() {
-  const [node, onSetNode] = useState(null);
-  const ref = useCallback(onSetNode, [onSetNode]);
-  return [ref, node];
-}
-
 function animate(_ref) {
   let {
     duration,
@@ -240,36 +270,6 @@ SwipeScroll.defaultProps = {
   duration: 1400
 };
 
-function throttle(fn, wait) {
-  let isCalled = false;
-  return function () {
-    if (!isCalled) {
-      fn(...arguments);
-      isCalled = true;
-      setTimeout(function () {
-        isCalled = false;
-      }, wait);
-    }
-  };
-}
-
-const THROTTLE_DELAY = 44;
-const useResize = (width, callback) => {
-  const throttledCallback = useMemo(() => {
-    return callback ? throttle(callback, THROTTLE_DELAY) : undefined;
-  }, [callback]);
-  useEffect(() => {
-    throttledCallback && typeof width !== 'number' && window.addEventListener('resize', throttledCallback);
-    return () => throttledCallback && window.removeEventListener('resize', throttledCallback);
-  }, [width, throttledCallback]);
-};
-
-const appendSvg = (node, width, height) => {
-  select(node).select('svg').remove();
-  const svg = select(node).append('svg').attr('width', width).attr('height', height);
-  return svg;
-};
-
 const degByIndex = (index, count) => {
   const degs = 360;
   const deg = degs / count * index;
@@ -718,7 +718,7 @@ function degreesToRadians(degrees) {
 }
 
 function _templateObject$5() {
-  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    fill: #4a4a4a;\n  }\n  .", " {\n    position: absolute;\n    max-width: 128px;\n  }\n  .", " {\n    stroke: #000;\n  }\n"]);
+  const data = _taggedTemplateLiteralLoose(["\n  .", " {\n    fill: #4a4a4a;\n  }\n  .", " {\n    position: absolute;\n    max-width: 128px;\n  }\n  .", " {\n    stroke: #000;\n  }\n  .", " {\n    fill: transparent;\n    cursor: pointer;\n  }\n"]);
 
   _templateObject$5 = function _templateObject() {
     return data;
@@ -740,9 +740,10 @@ const pieChartclassNames = {
   pieTooltipItem: 'pieTooltipItem',
   pieTooltipName: 'pieTooltipName',
   pieTooltipValue: 'pieTooltipValue',
-  pieTooltipColorBox: 'pieTooltipColorBox'
+  pieTooltipColorBox: 'pieTooltipColorBox',
+  pieFullChartTooltipCircle: 'pieFullChartTooltipCircle'
 };
-const SvgWrapper$1 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/_templateObject$5(), pieChartclassNames.pieSliceLabel, pieChartclassNames.pieRadialLabel, pieChartclassNames.pieRadialLink);
+const SvgWrapper$1 = /*#__PURE__*/styled(Wrapper)( /*#__PURE__*/_templateObject$5(), pieChartclassNames.pieSliceLabel, pieChartclassNames.pieRadialLabel, pieChartclassNames.pieRadialLink, pieChartclassNames.pieFullChartTooltipCircle);
 
 const getMidFactor = d => d.startAngle + (d.endAngle - d.startAngle) / 2 < Math.PI ? 1 : -1;
 const getAlign = d => {
@@ -971,7 +972,10 @@ const drawTooltip = (_ref) => {
     renderTooltip,
     arc,
     allSlices,
-    tooltipStyle
+    tooltipStyle,
+    width,
+    height,
+    radius
   } = _ref;
   const container = tooltipRoot || document.querySelector('body');
   const format$1 = format(',');
@@ -1058,11 +1062,15 @@ const drawTooltip = (_ref) => {
 
   if (fullChartTooltip) {
     global.on('mouseover.fulltooltip', event => setTooltip(event));
-    global.on('mouseoutfulltooltip', () => {
+    global.on('mouseout.fulltooltip', () => {
       tooltipContainer.html('');
       setVisible();
     });
 
+    if (width && height) {
+      global.append('circle').attr('class', pieChartclassNames.pieFullChartTooltipCircle).attr('r', radius).attr('cx', 0).attr('cy', 0);
+    }
+
     if (!tooltipBind) {
       global.on('touchmove.tooltipBind mousemove.tooltipBind', event => setPosition(event));
     }
@@ -1207,7 +1215,10 @@ const draw$1 = (node, props) => {
         renderTooltip,
         allSlices,
         arc: arc$1,
-        tooltipStyle
+        tooltipStyle,
+        width,
+        height,
+        radius
       });
     }
 
@@ -1702,16 +1713,21 @@ const drawTooltip$1 = (_ref) => {
   const mouseRect = mouseGlobal.append('rect').attr('width', x2 - x1).attr('height', Math.abs(y1 - y2)).attr('class', lineChartClassNames.lineChartMouseRect).attr('transform', "translate(" + x1 + ", " + y2 + ")");
   const mouseLine = mouseGlobal.append('path').attr('class', lineChartClassNames.lineChartMouseLine).style('opacity', '0');
   const lines = svg.selectAll("." + lineChartClassNames.lineChartLine).nodes();
-  const circles = mouseGlobal.selectAll('circle').data(chartData).join('circle').attr('class', lineChartClassNames.lineChartMouseCircle).attr('r', dynamicCircleRadius).attr('fill', (_ref3) => {
+  const circles = mouseGlobal.selectAll('circle').data(chartData.filter((_ref3) => {
     let {
-      stroke
+      dynamicDotOff
     } = _ref3;
-    return stroke || 'none';
-  }).attr('stroke', (_ref4) => {
+    return !dynamicDotOff;
+  })).join('circle').attr('class', lineChartClassNames.lineChartMouseCircle).attr('r', dynamicCircleRadius).attr('fill', (_ref4) => {
     let {
       stroke
     } = _ref4;
     return stroke || 'none';
+  }).attr('stroke', (_ref5) => {
+    let {
+      stroke
+    } = _ref5;
+    return stroke || 'none';
   }).style('opacity', '0');
   let labelContainer = select("." + lineChartClassNames.lineChartMouseLabelContainer);
 
@@ -1772,27 +1788,27 @@ const drawTooltip$1 = (_ref) => {
     circles.attr('transform', (lineChartData, index) => {
       const value = getValue(lineChartData.values);
       return positions[index] && value ? 'translate(' + x + ',' + positions[index].y + ')' : 'translate(-9999, -9999)';
-    }).attr('style', (_ref5) => {
+    }).attr('style', (_ref6) => {
       let {
         dynamicDotStyle
-      } = _ref5;
+      } = _ref6;
       return dynamicDotStyle || '';
     });
-    const datas = chartData.map((_ref6, i) => {
+    const datas = chartData.map((_ref7, i) => {
       let {
         values
-      } = _ref6,
-          rest = _objectWithoutPropertiesLoose(_ref6, ["values"]);
+      } = _ref7,
+          rest = _objectWithoutPropertiesLoose(_ref7, ["values"]);
 
       return _extends({}, rest, {
         value: getValue(values),
         invertValue: positions[i] ? yScale.invert(positions[i].y) : 0
       });
     });
-    const noHasData = datas.every((_ref7) => {
+    const noHasData = datas.every((_ref8) => {
       let {
         value
-      } = _ref7;
+      } = _ref8;
       return isVoid(value);
     });
 
@@ -1807,7 +1823,8 @@ const drawTooltip$1 = (_ref) => {
 
       const prevValue = (_datas$Number = datas[Number(acc)]) == null ? void 0 : _datas$Number.value;
       const value = (_datas$Number2 = datas[Number(key)]) == null ? void 0 : _datas$Number2.value;
-      return index === 0 || isVoid(value) ? acc : isVoid(prevValue) || positions[acc].y > positions[key].y ? key : acc;
+      const dynamicDotOff = argData == null ? void 0 : argData[index].dynamicDotOff;
+      return index === 0 || isVoid(value) || dynamicDotOff ? acc : isVoid(prevValue) || positions[acc].y > positions[key].y ? key : acc;
     }, '0');
     const labelTexts = labels && labels.style('left', left + "px").style('top', (_, i) => {
       const index = typeof stackedTooltipIndex === 'number' ? stackedTooltipIndex : stackedTooltip ? topIndex : i;
@@ -2053,7 +2070,7 @@ const draw$3 = (node, props) => {
           filter
         } = dot;
         const dotsGroup = dotsGlobal.append('g').attr('class', lineChartClassNames.lineChartDotsGlobal);
-        dotsGroup.selectAll('circle').data(values).join('circle').attr('cx', (_, index) => xScale(index)).attr('class', lineChartClassNames.lineChartDot).attr('cy', d => yScale(d)).attr('r', radius).attr('style', style || '');
+        dotsGroup.selectAll('circle').data(values).join('circle').attr('cx', (_, index) => xScale(index)).attr('class', lineChartClassNames.lineChartDot).attr('cy', d => yScale(d)).attr('r', radius || 0).attr('style', style || '');
 
         if (filter) {
           dotsGroup.selectAll('circle').select((_, i, g) => filter(item, i, g) ? g[i] : null).remove();
@@ -3147,7 +3164,7 @@ const Tooltip = (_ref) => {
       }
     }), name && React.createElement(Name$1, {
       className: horizontalBarChartClassNames.horizontalBarChartTooltipName
-    }, "name"), React.createElement(Value, {
+    }, name), React.createElement(Value, {
       className: horizontalBarChartClassNames.horizontalBarChartTooltipValue
     }, format$1(value)));
   })));
@@ -3160,7 +3177,8 @@ const useTooltip = (_ref) => {
     tooltipBind,
     tooltipStyle,
     tooltipRoot,
-    tooltipClassName
+    tooltipClassName,
+    hideTooltip
   } = _ref;
   useEffect(() => {
     const container = tooltipRoot || document.querySelector('body');
@@ -3199,8 +3217,9 @@ const useTooltip = (_ref) => {
   const onMouseLeave = useCallback(() => {
     if (rootElement) {
       rootElement.style.visibility = 'hidden';
+      hideTooltip && hideTooltip();
     }
-  }, []);
+  }, [hideTooltip]);
   return [onMouseMove, onMouseLeave];
 };
 
@@ -3380,7 +3399,8 @@ const HorizontalBarChart = (_ref) => {
     thead,
     withoutXScale,
     stackedTooltip,
-    fullChartTooltip
+    fullChartTooltip,
+    hideTooltip
   } = _ref;
   const {
     fullMax,
@@ -3395,7 +3415,8 @@ const HorizontalBarChart = (_ref) => {
     renderTooltip,
     tooltipBind,
     tooltipStyle,
-    tooltipClassName
+    tooltipClassName,
+    hideTooltip
   });
   const Stack = useStackWrapper(stackedTooltip);
   return React.createElement(Table, {
@@ -3812,5 +3833,5 @@ const bubbleChartDefaultProps = {
 };
 BubbleChart.defaultProps = bubbleChartDefaultProps;
 
-export { BarChart, BubbleChart, CalendarChart, Wrapper as ChartWrapper, HorizontalBarChart, LineChart, PieChart, RadarChart, SwipeScroll, barChartClassNames, bubbleChartClassNames, calendarChartClassNames, horizontalBarChartClassNames, lineChartClassNames, pieChartclassNames, radarChartclassNames };
+export { BarChart, BubbleChart, CalendarChart, Wrapper as ChartWrapper, HorizontalBarChart, LineChart, PieChart, RadarChart, SwipeScroll, appendSvg, barChartClassNames, bubbleChartClassNames, calendarChartClassNames, horizontalBarChartClassNames, lineChartClassNames, pieChartclassNames, radarChartclassNames, useNode, useResize };
 //# sourceMappingURL=charts.esm.js.map