@evergis/charts 2.0.95 → 2.0.97

package/dist/charts/LineChart/drawTooltip/index.d.ts

@@ -1,2 +1,2 @@
 import { DrawTooltipProps } from './types';
-export declare const drawTooltip: ({ svg, node, data: argData, xScale, yScale, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, }: DrawTooltipProps) => void;
+export declare const drawTooltip: ({ svg, node, data: argData, xScale, yScale, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, dotSnapping, lastIndex, }: DrawTooltipProps) => void;

package/dist/charts/LineChart/drawTooltip/types.d.ts

@@ -5,4 +5,5 @@ export declare type DrawTooltipProps = {
     node: HTMLElement;
     yScale: d3.ScaleLinear<number, number>;
     xScale: d3.ScaleLinear<number, number>;
-} & Pick<LineChartProps, 'data' | 'dynamicCircleRadius' | 'formatDynamicTooltip' | 'renderTooltip' | 'stackedTooltipIndex' | 'stackedTooltip' | 'tooltipLineTop' | 'tooltipRoot' | 'tooltipClassName'>;
+    lastIndex: number;
+} & Pick<LineChartProps, 'data' | 'dynamicCircleRadius' | 'formatDynamicTooltip' | 'renderTooltip' | 'stackedTooltipIndex' | 'stackedTooltip' | 'tooltipLineTop' | 'tooltipRoot' | 'tooltipClassName' | 'dotSnapping'>;

package/dist/charts/LineChart/types.d.ts

@@ -49,6 +49,7 @@ export declare type LineChartProps = {
     tooltipRoot?: Element;
     tooltipClassName?: string;
     xScaleItemWidth?: number;
+    dotSnapping?: boolean;
 };
 export declare type LineChartDot = {
     radius?: number;

package/dist/charts.cjs.development.js

@@ -1426,7 +1426,9 @@ const drawTooltip$1 = _ref => {
     stackedTooltip,
     tooltipLineTop,
     tooltipRoot,
-    tooltipClassName
+    tooltipClassName,
+    dotSnapping,
+    lastIndex
   } = _ref;
   const container = tooltipRoot || document.querySelector('body');
   const format = d3.format(',');
@@ -1498,26 +1500,42 @@ const drawTooltip$1 = _ref => {
         return;
       }
 
-      let beginning = 0;
-      let end = line.getTotalLength();
-      let target = null;
+      if (!dotSnapping) {
+        let beginning = 0;
+        let end = line.getTotalLength();
+        let target = null;
+
+        while (true) {
+          target = Math.floor((beginning + end) / 2);
+          pos = line.getPointAtLength(target);
 
-      while (true) {
-        target = Math.floor((beginning + end) / 2);
-        pos = line.getPointAtLength(target);
+          if ((target === end || target === beginning) && pos.x !== x) {
+            break;
+          }
 
-        if ((target === end || target === beginning) && pos.x !== x) {
-          break;
+          if (pos.x > x) {
+            end = target;
+          } else if (pos.x < x) {
+            beginning = target;
+          } else {
+            break;
+          }
         }
 
-        if (pos.x > x) end = target;else if (pos.x < x) beginning = target;else break;
+        positions[index] = pos;
+      } else {
+        const [x1, x2] = xScale.range();
+        const chartWidth = x2 - x1;
+        const step = chartWidth / lastIndex;
+        positions[index] = {
+          x: x1 + Math.round(currIndex) * step,
+          y: typeof argData[index].values[Math.round(currIndex)] === "number" ? yScale(argData[index].values[Math.round(currIndex)]) : 0
+        };
       }
-
-      positions[index] = pos;
     });
     circles.attr('transform', (lineChartData, index) => {
       const value = getValue(lineChartData.values);
-      return positions[index] && value ? 'translate(' + x + ',' + positions[index].y + ')' : 'translate(-9999, -9999)';
+      return positions[index] && value ? 'translate(' + (!dotSnapping ? x : positions[index].x) + ',' + positions[index].y + ')' : 'translate(-9999, -9999)';
     }).attr('style', _ref6 => {
       let {
         dynamicDotStyle
@@ -1556,14 +1574,20 @@ const drawTooltip$1 = _ref => {
       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 labelTexts = labels && labels.style('left', (_, i) => {
+      var _positions$i$x, _positions$i;
+
+      return !dotSnapping ? left + "px" : ((_positions$i$x = (_positions$i = positions[i]) == null ? void 0 : _positions$i.x) != null ? _positions$i$x : 0) + "px";
+    }).style('top', (_, i) => {
+      var _positions$index$y, _positions$index, _positions$index$y2, _positions$index2;
+
       const index = typeof stackedTooltipIndex === 'number' ? stackedTooltipIndex : stackedTooltip ? topIndex : i;
-      return (positions[index] && positions[index].y + (docY - nodeY)) + "px";
+      return !dotSnapping ? ((_positions$index$y = (_positions$index = positions[index]) == null ? void 0 : _positions$index.y) != null ? _positions$index$y : 0) + (docY - nodeY) + "px" : ((_positions$index$y2 = (_positions$index2 = positions[index]) == null ? void 0 : _positions$index2.y) != null ? _positions$index$y2 : 0) + "px";
     }).select("." + lineChartClassNames.lineChartLabel);
 
     if (renderTooltip && labels) {
       labels.html((_, index) => {
-        const html = ReactDOMServer.renderToString(React__default.createElement(LabelContainer$1, {
+        return ReactDOMServer.renderToString(React__default.createElement(LabelContainer$1, {
           className: lineChartClassNames.lineChartLabelFlex
         }, renderTooltip(datas, {
           indexX: Math.round(currIndex),
@@ -1571,7 +1595,6 @@ const drawTooltip$1 = _ref => {
           svg,
           event
         })));
-        return html;
       });
     } else {
       labelTexts && labelTexts.text((_, i) => {
@@ -1638,7 +1661,8 @@ const draw$3 = (node, props) => {
     customLine,
     tooltipClassName,
     xScaleItemWidth,
-    areaCurve
+    areaCurve,
+    dotSnapping
   } = props;
 
   if (node !== null && chartData.length) {
@@ -1831,7 +1855,9 @@ const draw$3 = (node, props) => {
         xScale,
         yScale,
         dynamicCircleRadius,
-        tooltipClassName
+        tooltipClassName,
+        dotSnapping,
+        lastIndex
       });
     }