@evergis/charts 3.0.20 → 3.0.22

package/dist/charts.esm.js

@@ -2052,6 +2052,13 @@ const useSelection = (node, props) => {
   const drawing = useRef(false);
   const startX = useRef(0);
   const selection = useRef();
+  const clearSelection = useCallback(() => {
+    if (node && selection.current) {
+      drawing.current = false;
+      node.removeChild(selection.current);
+      selection.current = undefined;
+    }
+  }, [node]);
   const onStartDrawing = useCallback(e => {
     const isTouch = Boolean(e.touches);
     e.stopPropagation();
@@ -2059,6 +2066,7 @@ const useSelection = (node, props) => {
     if (node && e.which !== 3) {
       var _props$margin$bottom, _props$margin, _e$touches$;
 
+      clearSelection();
       selection.current = document.createElement("div");
       selection.current.setAttribute("class", barChartClassNames.barChartSelection);
       selection.current.setAttribute("style", "height: calc(100% - " + ((_props$margin$bottom = (_props$margin = props.margin) == null ? void 0 : _props$margin.bottom) != null ? _props$margin$bottom : 0) + "px)");
@@ -2130,12 +2138,10 @@ const useSelection = (node, props) => {
       if (max - min > 0 && props.onSelect) {
         props.onSelect([min, max]);
       }
-
-      drawing.current = false;
-      node.removeChild(selection.current);
-      selection.current = undefined;
     }
-  }, [node]);
+
+    clearSelection();
+  }, [node, clearSelection]);
   useEffect(() => {
     if (node) {
       node.childNodes.forEach(child => {
@@ -2662,6 +2668,7 @@ const getBars = _ref => {
   return groups.selectAll('rect').data(item => item).join('rect').attr('x', item => item.x).attr('y', item => item.y).attr('width', barWidth).attr('height', item => item.height).style('fill', item => item.color);
 };
 
+const MIN_BAR_HEIGHT = 2;
 const draw$4 = (node, props) => {
   const {
     data,
@@ -2808,7 +2815,8 @@ const draw$4 = (node, props) => {
       drawGridX
     });
     xAxis.attr('transform', "translate(0, " + (yScale(yTicks[0]) + (xAxisPadding || 0)) + ")");
-    const gSvg = svg.append('g').attr('class', barChartClassNames.barChartBarGlobal);
+    svg.append('defs').append('mask').attr('id', 'height-limit-mask').append('rect').attr('width', '100%').attr('height', height - marginBottom + MIN_BAR_HEIGHT).attr('fill', 'white');
+    const gSvg = svg.append('g').attr('class', barChartClassNames.barChartBarGlobal).attr('mask', 'url(#height-limit-mask)');
     const groups = gSvg.selectAll('g').data(marshalledData).enter().append('g').attr('transform', (_, i) => "translate(" + Math.round(xScale(i)) + "," + -(marginTop || 0) + ")");
     const bars = drawBars ? drawBars({
       groups,
@@ -2825,13 +2833,19 @@ const draw$4 = (node, props) => {
       }
 
       if (marker.horizontal) {
-        svg.append('line').style("stroke", marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", marginLeft + yAxisWidth).attr("y1", yScale(marker.value) + 1).attr("x2", width).attr("y2", yScale(marker.value) + 1);
+        if (marker.line) {
+          svg.append('line').style("stroke", marker.lineColor || marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", marginLeft + yAxisWidth).attr("y1", yScale(marker.value) + 1).attr("x2", width).attr("y2", yScale(marker.value) + 1);
+        }
+
         svg.append("text").attr("y", yScale(marker.value) + 1).attr("x", marginLeft + yAxisWidth).attr('text-anchor', 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
         return;
       }
 
-      svg.append('line').style("stroke", marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", width / data.length * marker.value + 1).attr("y1", 0).attr("x2", width / data.length * marker.value + 1).attr("y2", height - marginTop - marginBottom + marginBottom / 2);
-      svg.append("text").attr("y", height).attr("x", width / data.length * marker.value + 1).attr('text-anchor', 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
+      if (marker.line) {
+        svg.append('line').style("stroke", marker.lineColor || marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", width / data.length * marker.value + 1).attr("y1", 0).attr("x2", width / data.length * marker.value + 1).attr("y2", height - marginTop - marginBottom + marginBottom / 2);
+      }
+
+      svg.append("text").attr("y", height - 3).attr("x", width / data.length * marker.value + 1).attr('text-anchor', marker.align === 'right' ? 'end' : marker.align === 'left' ? 'start' : 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
     });
     let lines = null;