@evergis/charts 3.0.24 → 3.0.26

package/dist/charts.esm.js

@@ -2,6 +2,7 @@ import styled, { css, createGlobalStyle } from 'styled-components';
 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, axisRight, line, curveLinear, area, scaleBand, sum, scaleLog } from 'd3';
 import ReactDOMServer from 'react-dom/server';
+import { uniqueId } from 'lodash-es';
 import { unmountComponentAtNode, render } from 'react-dom';
 
 function _extends() {
@@ -2660,15 +2661,16 @@ const resizeBarWidth = _ref => {
   return barWidth;
 };
 
+const MIN_BAR_HEIGHT = 2;
 const getBars = _ref => {
   let {
     groups,
     barWidth
   } = _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);
+  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.value === null ? 0 : Math.max(item.height, MIN_BAR_HEIGHT)).style('fill', item => item.color);
 };
 
-const MIN_BAR_HEIGHT = 2;
+const MIN_BAR_HEIGHT$1 = 2;
 const draw$4 = (node, props) => {
   const {
     data,
@@ -2815,8 +2817,9 @@ const draw$4 = (node, props) => {
       drawGridX
     });
     xAxis.attr('transform', "translate(0, " + (yScale(yTicks[0]) + (xAxisPadding || 0)) + ")");
-    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 maskId = "height-limit-mask-" + uniqueId();
+    svg.append('defs').append('mask').attr('id', maskId).append('rect').attr('width', '100%').attr('height', height - marginBottom + MIN_BAR_HEIGHT$1).attr('fill', 'white');
+    const gSvg = svg.append('g').attr('class', barChartClassNames.barChartBarGlobal).attr('mask', "url(#" + maskId + ")");
     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,