@vizzly/dashboard 0.14.4-dev-28ace990f8935dcd353f0b09527a2a1b32940e13 → 0.14.4-dev-dacb7b6ee19300aa636d654c99f13d6ac43da830

package/dist/dashboard.esm.js

@@ -28,7 +28,7 @@ import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/elemen
 import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { ParentSize } from '@visx/responsive';
-import { Annotation, AnnotationConnector, AnnotationLabel, DataContext, buildChartTheme, lightTheme, XYChart, Grid as Grid$1, Axis, AreaSeries, AreaStack, BarGroup, BarSeries, BarStack, GlyphSeries, LineSeries, Tooltip as Tooltip$2 } from '@visx/xychart';
+import { Annotation, AnnotationConnector, AnnotationLabel, DataContext, buildChartTheme, lightTheme, XYChart, Grid as Grid$1, Axis, AreaSeries, AreaStack, BarGroup, BarSeries, BarStack, GlyphSeries, LineSeries, Tooltip as Tooltip$3 } from '@visx/xychart';
 import { LinearGradient } from '@visx/gradient';
 import { LegendItem as LegendItem$1, LegendLabel } from '@visx/legend';
 import { scaleOrdinal, scaleQuantize, scalePoint, scaleTime, scaleLinear, scaleBand } from '@visx/scale';
@@ -55,7 +55,6 @@ import { AxisBottom as AxisBottom$1, AxisLeft as AxisLeft$1 } from '@visx/axis';
 import { Text } from '@visx/text';
 import { GridRows as GridRows$1 } from '@visx/grid';
 import '@visx/point';
-import { WaterfallChart as WaterfallChart$4 } from './charts/src/v2/components/WaterfallChart';
 import VisibilitySensor from 'react-visibility-sensor';
 import ExcelJS from 'exceljs';
 import { saveAs } from 'file-saver';
@@ -32144,7 +32143,7 @@ var VizzlyXYChart = function VizzlyXYChart(props) {
             }, "area_lines_" + props.uniqueId + "_" + indexOne + "_" + indexTwo);
           })
         }, "area_lines_" + props.uniqueId + "_" + indexOne);
-      }), props != null && (_props$bars14 = props.bars) != null && _props$bars14.funnelChart ? jsx(Tooltip$2, {
+      }), props != null && (_props$bars14 = props.bars) != null && _props$bars14.funnelChart ? jsx(Tooltip$3, {
         showVerticalCrosshair: true,
         showSeriesGlyphs: true,
         style: tooltipStyles,
@@ -32175,7 +32174,7 @@ var VizzlyXYChart = function VizzlyXYChart(props) {
             formatValue: formatYAxisLabel$1(props)
           });
         }
-      }) : jsx(Tooltip$2, {
+      }) : jsx(Tooltip$3, {
         showVerticalCrosshair: true,
         style: tooltipStyles,
         showSeriesGlyphs: props.bars == undefined,
@@ -46860,6 +46859,608 @@ var BarChartV2 = function BarChartV2(props) {
   });
 };
 
+function getBarFill$1(bars, conditionalFormattingRules, barKey, barValues) {
+  var _bars$find;
+  // Default fill color from the corresponding bar
+  var fill = (_bars$find = bars.find(function (chartBar) {
+    return chartBar.yKey === barKey;
+  })) == null ? void 0 : _bars$find.color;
+
+  // Determine the value based on barValues type
+  var value = typeof barValues === 'number' ? barValues : barValues == null ? void 0 : barValues[barKey];
+  if (typeof value === 'number') {
+    for (var _iterator = _createForOfIteratorHelperLoose(conditionalFormattingRules), _step; !(_step = _iterator()).done;) {
+      var rule = _step.value;
+      if (compare({
+        op: rule.operator,
+        value: rule.value
+      }, value)) {
+        fill = rule.color;
+        break;
+      }
+    }
+  }
+  return fill;
+}
+
+var ASSUMED_AVERAGE_CHAR_WIDTH$2 = 8.8;
+function calculateWordWidth$2(word, avgCharWidth) {
+  if (avgCharWidth === void 0) {
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+  }
+  return word.length * avgCharWidth;
+}
+
+/** Reduce width proportionally to simulate spacing / padding between ticks. */
+var widthWithSpacing$2 = function widthWithSpacing(width) {
+  var THIRTY_PERCENT = 0.3;
+  return width - width * THIRTY_PERCENT;
+};
+function howManyTicksFitInWidth$2(ticks, maxWidth, avgCharWidth) {
+  if (avgCharWidth === void 0) {
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+  }
+  var fittedTicks = [];
+  var currentWidth = 0;
+  for (var _iterator = _createForOfIteratorHelperLoose(ticks), _step; !(_step = _iterator()).done;) {
+    var tick = _step.value;
+    var word = (tick == null ? void 0 : tick.formattedValue) || '';
+    var wordWidth = calculateWordWidth$2(word, avgCharWidth);
+    if (currentWidth + wordWidth <= widthWithSpacing$2(maxWidth)) {
+      fittedTicks.push(tick);
+      currentWidth += wordWidth + avgCharWidth; // Add space between words
+    } else {
+      break; // Stop if adding the word exceeds maxWidth
+    }
+  }
+  return fittedTicks.length;
+}
+function pickEquallySpaced$2(arr, numPicks) {
+  if (numPicks >= arr.length) {
+    return arr; // If numPicks is greater than or equal to the array length, return the whole array
+  }
+  var result = [];
+  var interval = (arr.length - 1) / (numPicks - 1);
+  for (var i = 0; i < numPicks; i++) {
+    var index = Math.round(i * interval); // Calculate index and round it
+    result.push(arr[index]);
+  }
+  return result;
+}
+var adjustTicks$2 = function adjustTicks(waterfallChartRepresentation, width) {
+  waterfallChartRepresentation = cloneDeep(waterfallChartRepresentation);
+
+  // TODO; take this from the theme override...
+  var averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH$2;
+  var numberOfTicksFittingIntoSpace = howManyTicksFitInWidth$2(waterfallChartRepresentation.x.ticks || [], width, averageCharacterWidth);
+  var MINIMUM_NUMBER_OF_TICKS = 2;
+  if (numberOfTicksFittingIntoSpace < MINIMUM_NUMBER_OF_TICKS) {
+    numberOfTicksFittingIntoSpace = MINIMUM_NUMBER_OF_TICKS;
+  }
+
+  // @ts-ignore
+  waterfallChartRepresentation.x.ticks = pickEquallySpaced$2(waterfallChartRepresentation.x.ticks, numberOfTicksFittingIntoSpace);
+  return waterfallChartRepresentation;
+};
+
+var Tooltip$2 = function Tooltip(_ref) {
+  var _tooltipData$xKey$for, _tooltipData$yKey$for;
+  var showTooltip = _ref.showTooltip,
+    tooltipData = _ref.tooltipData,
+    tooltipLeft = _ref.tooltipLeft,
+    tooltipTop = _ref.tooltipTop,
+    xKey = _ref.xKey,
+    yKey = _ref.yKey,
+    theme = _ref.theme;
+  var tooltipRowContainerClasses = buildStyleOverrides({
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    gap: 12,
+    fontWeight: 500,
+    color: 'inherit',
+    alignItems: 'center'
+  });
+  var rowClasses = buildStyleOverrides({
+    borderBottom: '1px dotted rgba(0,0,0,0.025)'
+  });
+  var rowLabelClasses = buildStyleOverrides({
+    alignItems: 'center',
+    display: 'flex',
+    fontFamily: 'inherit',
+    letterSpacing: 'inherit',
+    gap: 6
+  });
+  var rowValueClasses = buildStyleOverrides({
+    display: 'block',
+    fontFamily: 'inherit',
+    letterSpacing: 'inherit',
+    margin: 0,
+    padding: 0,
+    textAlign: 'right'
+  });
+  var highlightedClasses = buildStyleOverrides({
+    wordBreak: 'break-all'
+  });
+  if (!showTooltip || !tooltipData) return null;
+  var value = tooltipData[yKey].value;
+  var isPositiveValue = Number(value) > 0;
+  return jsx(TooltipWithBounds, {
+    left: tooltipLeft,
+    top: tooltipTop,
+    style: theme,
+    children: jsxs("div", {
+      style: {
+        wordBreak: 'break-all'
+      },
+      children: [jsx("div", {
+        style: {
+          fontFamily: 'inherit',
+          lineHeight: 'inherit',
+          letterSpacing: 'inherit',
+          fontWeight: 'bold',
+          fontSize: '15px',
+          width: '100%'
+        },
+        children: (_tooltipData$xKey$for = tooltipData[xKey].formattedValue) != null ? _tooltipData$xKey$for : tooltipData[xKey].value
+      }), jsxs("div", {
+        style: {
+          fontWeight: 700
+        },
+        className: "" + tooltipRowContainerClasses,
+        children: [jsx("span", {
+          className: rowClasses + " " + rowLabelClasses,
+          children: jsx("span", {
+            className: "" + highlightedClasses,
+            children: isPositiveValue ? jsx(IconNarrowRight$1, {}) : jsx(IconTrendingDown$1, {})
+          })
+        }), jsx("p", {
+          className: rowClasses + " " + rowValueClasses,
+          children: (_tooltipData$yKey$for = tooltipData[yKey].formattedValue) != null ? _tooltipData$yKey$for : tooltipData[yKey].value
+        })]
+      })]
+    })
+  }, Math.random());
+};
+var IconNarrowRight$1 = function IconNarrowRight() {
+  var style = {
+    width: 20,
+    height: 20,
+    display: 'block'
+  };
+  var fill = "#12B76A";
+  return jsx("svg", {
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    style: style,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M244 56v64a12 12 0 0 1-24 0V85l-75.51 75.52a12 12 0 0 1-17 0L96 129l-63.51 63.49a12 12 0 0 1-17-17l72-72a12 12 0 0 1 17 0L136 135l67-67h-35a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12",
+      fill: fill
+    })
+  });
+};
+var IconTrendingDown$1 = function IconTrendingDown() {
+  var style = {
+    width: 20,
+    height: 20,
+    display: 'block'
+  };
+  var fill = "#F04438";
+  return jsx("svg", {
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    style: style,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 13a1 1 0 1 0 0 2h5a1 1 0 0 0 1-1V9a1 1 0 1 0-2 0v2.586l-4.293-4.293a1 1 0 0 0-1.414 0L8 9.586 3.707 5.293a1 1 0 0 0-1.414 1.414l5 5a1 1 0 0 0 1.414 0L11 9.414 14.586 13H12Z",
+      fill: fill
+    })
+  });
+};
+
+var Legend$2 = function Legend(_ref) {
+  var showLegend = _ref.showLegend,
+    margin = _ref.margin;
+  var items = [{
+    color: 'green',
+    yKey: 'increase',
+    style: {
+      type: 'line',
+      strokeDasharray: null,
+      strokeWidth: 2
+    }
+  }, {
+    color: 'red',
+    yKey: 'decrease',
+    style: {
+      type: 'line',
+      strokeDasharray: null,
+      strokeWidth: 2
+    }
+  }];
+  var keys = {
+    increase: {
+      key: 'increase',
+      keyFormatted: 'Increase',
+      dataType: 'string'
+    },
+    decrease: {
+      key: 'decrease',
+      keyFormatted: 'Decrease',
+      dataType: 'string'
+    }
+  };
+  if (!showLegend) return null;
+  return jsx(Legend$1, {
+    legendItems: items,
+    visibleYKeys: ['increase', 'decrease'],
+    keys: keys,
+    marginLeft: margin.left - margin.leftTitleOffset,
+    conditionalFormattingRules: [],
+    setVisibleYKeys: function setVisibleYKeys() {}
+  });
+};
+
+var _excluded$g = ["formattedValue"],
+  _excluded2$4 = ["formattedValue"];
+var AXIS_TITLE_STYLES$1 = {
+  opacity: '0.75',
+  fontWeight: 'bold'
+};
+var WaterfallChart$2 = function WaterfallChart(_ref) {
+  var _theme$axis$stroke, _theme$axis;
+  var height = _ref.height,
+    width = _ref.width,
+    options = _ref.options,
+    chart = _ref.chart,
+    theme = _ref.theme;
+  //Waterfall TODO: fix chart for other x types
+  if (chart.x.scale.dataType === 'date_time' || chart.x.scale.dataType === 'number') {
+    return null;
+  }
+  var _useTooltip = useTooltip$1(),
+    tooltipOpen = _useTooltip.tooltipOpen,
+    _useTooltip$tooltipLe = _useTooltip.tooltipLeft,
+    tooltipLeft = _useTooltip$tooltipLe === void 0 ? 0 : _useTooltip$tooltipLe,
+    _useTooltip$tooltipTo = _useTooltip.tooltipTop,
+    tooltipTop = _useTooltip$tooltipTo === void 0 ? 0 : _useTooltip$tooltipTo,
+    tooltipData = _useTooltip.tooltipData,
+    hideTooltip = _useTooltip.hideTooltip,
+    showTooltip = _useTooltip.showTooltip;
+  var chartCopy = cloneDeep(chart);
+  var data = chartCopy.data,
+    x = chartCopy.x,
+    y = chartCopy.y;
+  var showTotalBar = options.showTotalBar;
+  var conditionalFormattingRules = [{
+    yKey: y.key,
+    operator: '>',
+    value: 0,
+    color: 'green'
+  }, {
+    yKey: y.key,
+    operator: '<',
+    value: 0,
+    color: 'red'
+  }];
+  var xKey = x.key;
+  var yKey = y.key;
+  var cumulativeTotal = 0;
+  var steps = data.map(function (item) {
+    var xValue = item[xKey].value;
+    var yValue = Number(item[yKey].value);
+    var prevTotal = cumulativeTotal;
+    cumulativeTotal += yValue;
+    return {
+      x: xValue,
+      y: yValue,
+      start: prevTotal,
+      end: cumulativeTotal
+    };
+  });
+  if (showTotalBar) {
+    var _data$push;
+    steps.push({
+      x: "Total",
+      y: cumulativeTotal,
+      start: 0,
+      end: cumulativeTotal
+    });
+    data.push((_data$push = {}, _data$push[x.key] = {
+      value: "Total",
+      formattedValue: "Total"
+    }, _data$push[y.key] = {
+      value: cumulativeTotal,
+      formattedValue: null
+    }, _data$push));
+    x.ticks.push({
+      value: "Total",
+      formattedValue: "Total",
+      scaleValue: "Total"
+    });
+  }
+  var formattedYAxisForBarChart = _extends({}, y, {
+    keys: [y.key]
+  });
+  var adjustedChartRepresentation = useMemo(function () {
+    return adjustTicks$2(_extends({}, chartCopy), width);
+  }, [chartCopy, width]);
+  var formattedChartDataForBarChart = _extends({}, adjustedChartRepresentation, {
+    y: formattedYAxisForBarChart,
+    steps: steps,
+    conditionalFormattingRules: conditionalFormattingRules,
+    bars: []
+  });
+  var margin = useMemo(function () {
+    return buildMargin(formattedChartDataForBarChart.y.ticks, options.axis.showYAxisLabels, formattedChartDataForBarChart.y.title != null, formattedChartDataForBarChart.x.title != null);
+  }, [formattedChartDataForBarChart.y.ticks, options.axis.showYAxisLabels, formattedChartDataForBarChart.y.title, formattedChartDataForBarChart.x.title]);
+  var innerWidth = width - margin.left - margin.right;
+  var innerHeight = height - margin.top - margin.bottom - (options.showLegend ? 40 : 0);
+  var xScaleKey = formattedChartDataForBarChart.x.scale.key;
+  var yScaleKeys = formattedChartDataForBarChart.y.keys;
+  var xScaleDataType = formattedChartDataForBarChart.x.scale.dataType;
+  var xScale = useMemo(function () {
+    return scaleBand({
+      range: [0, innerWidth],
+      domain: xScaleKey ? [].concat(formattedChartDataForBarChart.data.map(function (d) {
+        return d[xScaleKey] && d[xScaleKey].value !== null ? String(d[xScaleKey].value) : '';
+      })) : [],
+      paddingOuter: 0,
+      paddingInner: 0
+    });
+  }, [innerWidth, formattedChartDataForBarChart.x, formattedChartDataForBarChart.data]);
+  var yScale = useMemo(function () {
+    return scaleLinear({
+      range: [innerHeight, 0],
+      domain: formattedChartDataForBarChart.y.scale.ordering === 'asc' ? [formattedChartDataForBarChart.y.scale.min, formattedChartDataForBarChart.y.scale.max] : [formattedChartDataForBarChart.y.scale.max, formattedChartDataForBarChart.y.scale.min],
+      nice: true
+    });
+  }, [innerHeight, formattedChartDataForBarChart.y]);
+  var xBandwidth = xScale.bandwidth();
+  var innerXScale = useMemo(function () {
+    return scaleBand({
+      range: [0, xBandwidth],
+      domain: yScaleKeys,
+      padding: 0.1
+    });
+  }, [xScale, yScaleKeys, xScaleDataType]);
+  var dataFlattened = useMemo(function () {
+    if (xScaleKey) {
+      return flattenData({
+        data: formattedChartDataForBarChart.data,
+        xScaleKey: xScaleKey,
+        xScaleDataType: xScaleDataType,
+        yKeys: formattedChartDataForBarChart.y.keys
+      });
+    }
+    return [];
+  }, [formattedChartDataForBarChart.data, xScaleKey, xScaleDataType, formattedChartDataForBarChart.y.keys]);
+  var themeCSS = useMemo(function () {
+    return getChartThemeCSS(theme);
+  }, [theme]);
+  var yTickValues = formattedChartDataForBarChart.y.ticks.map(function (tick) {
+    return Number(tick.value);
+  });
+  var xTickValues = formattedChartDataForBarChart.x.ticks.length > 0 ? formattedChartDataForBarChart.x.ticks.map(function (tick) {
+    var _tick$scaleValue;
+    return (_tick$scaleValue = tick.scaleValue) != null ? _tick$scaleValue : 0;
+  }) : undefined;
+  var handleMouseMove = useCallback(function (event) {
+    if (!xKey || !xScaleKey || xScale === null) return;
+    var tooltipData = getTooltipData({
+      data: formattedChartDataForBarChart.data,
+      event: event,
+      margin: margin,
+      xScaleKey: xScaleKey,
+      xScaleDataType: xScaleDataType,
+      xOrdering: formattedChartDataForBarChart.x.scale.ordering,
+      xScale: xScale,
+      chartType: 'bar'
+    });
+    showTooltip({
+      tooltipLeft: tooltipData == null ? void 0 : tooltipData.tooltipLeft,
+      tooltipTop: tooltipData == null ? void 0 : tooltipData.tooltipTop,
+      tooltipData: tooltipData == null ? void 0 : tooltipData.tooltipData
+    });
+  }, [showTooltip, xScale, margin, xKey, xScaleKey, xScaleDataType, formattedChartDataForBarChart.x.scale.ordering, formattedChartDataForBarChart.data]);
+  var handleMouseLeave = useCallback(function () {
+    hideTooltip();
+  }, [hideTooltip]);
+  var getXTickFormat = useCallback(function (value) {
+    var tick = null;
+    if (xScaleDataType === 'date_time' && value instanceof Date) {
+      var matchingTickValue = formattedChartDataForBarChart.x.ticks.find(function (tickValue) {
+        return tickValue.scaleValue && new Date(tickValue.scaleValue).valueOf() === value.valueOf();
+      });
+      tick = matchingTickValue || null;
+    } else {
+      var _matchingTickValue = formattedChartDataForBarChart.x.ticks.find(function (tickValue) {
+        return tickValue.scaleValue === value;
+      });
+      tick = _matchingTickValue || null;
+    }
+    if (tick) {
+      if (tick.formattedValue) {
+        return tick.formattedValue;
+      }
+      return tick.value.toString();
+    }
+    return '';
+  }, [formattedChartDataForBarChart.x.ticks, xScaleDataType]);
+  var getYTickFormat = useCallback(function (value) {
+    var item = formattedChartDataForBarChart.y.ticks.filter(function (tick) {
+      return tick.value === value;
+    })[0];
+    if (item) {
+      if (item.formattedValue) {
+        return item.formattedValue;
+      }
+      return item.value.toString();
+    }
+    return '';
+  }, [formattedChartDataForBarChart.y.ticks]);
+  var getBarGroupPosition = useCallback(function (d) {
+    if (xScaleKey == null || d == null) return;
+    var xValue = d[xScaleKey];
+    if (xScaleDataType === 'string') return xValue;
+    return;
+  }, [xScaleKey, xScaleDataType]);
+  return jsxs(Fragment$1, {
+    children: [jsxs("svg", {
+      width: width,
+      height: height - (options.showLegend ? 40 : 0),
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        display: 'block'
+      },
+      children: [jsxs(Group$2, {
+        left: margin.left,
+        top: margin.top,
+        children: [jsx(GridRows$1, {
+          tickValues: yTickValues.length > 0 ? yTickValues : undefined,
+          scale: yScale,
+          width: innerWidth,
+          height: innerHeight,
+          pointerEvents: "none",
+          strokeDasharray: "0.5 5",
+          strokeWidth: options.removeStroke ? 0 : 2,
+          lineStyle: {
+            strokeLinecap: 'round',
+            stroke: themeCSS.grid.stroke
+          }
+        }), options.axis.showXAxisLabels && jsx(AxisBottom$1, {
+          label: formattedChartDataForBarChart.x.title || undefined,
+          labelProps: {
+            style: AXIS_TITLE_STYLES$1
+          },
+          labelOffset: margin.bottomTitleOffset,
+          hideTicks: true,
+          top: innerHeight,
+          scale: xScale,
+          tickFormat: getXTickFormat,
+          tickValues: xTickValues,
+          tickComponent: function tickComponent(_ref2) {
+            var formattedValue = _ref2.formattedValue,
+              tickProps = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
+            return jsx(Text, _extends({
+              style: themeCSS.labels
+            }, tickProps, {
+              children: formattedValue
+            }));
+          },
+          stroke: themeCSS.axis.stroke,
+          strokeWidth: options.removeStroke ? 0 : 1
+        }), options.axis.showYAxisLabels && jsx(AxisLeft$1, {
+          labelOffset: margin.leftTitleOffset,
+          label: formattedChartDataForBarChart.y.title || undefined,
+          labelProps: {
+            style: AXIS_TITLE_STYLES$1
+          },
+          hideTicks: true,
+          left: 0,
+          top: 0,
+          scale: yScale,
+          tickFormat: getYTickFormat,
+          tickValues: yTickValues,
+          tickComponent: function tickComponent(_ref3) {
+            var formattedValue = _ref3.formattedValue,
+              tickProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
+            return jsx(Text, _extends({
+              width: 10,
+              style: themeCSS.labels
+            }, tickProps, {
+              children: formattedValue
+            }));
+          },
+          stroke: (_theme$axis$stroke = theme == null || (_theme$axis = theme.axis) == null ? void 0 : _theme$axis.stroke) != null ? _theme$axis$stroke : 'transparent'
+        }), jsx(Group$2, {
+          children: jsx(BarGroup$1, {
+            data: dataFlattened,
+            keys: yScaleKeys,
+            height: innerHeight,
+            x0: getBarGroupPosition
+            // @ts-ignore
+            ,
+            x0Scale: xScale
+            // @ts-ignore
+            ,
+            x1Scale: innerXScale,
+            yScale: yScale,
+            color: function color() {
+              return '';
+            },
+            children: function children(barGroups) {
+              return barGroups.map(function (barGroup) {
+                return jsx(Group$2, {
+                  left: barGroup.x0,
+                  children: barGroup.bars.map(function (bar) {
+                    return jsx(Bar$1, {
+                      bar: bar,
+                      barGroup: barGroup,
+                      yScale: yScale,
+                      formattedChartDataForBarChart: formattedChartDataForBarChart
+                    });
+                  })
+                }, "bar-group-" + barGroup.index + "-" + barGroup.x0);
+              });
+            }
+          })
+        })]
+      }), tooltipData && jsx("g", {
+        children: jsx(Line, {
+          from: {
+            x: tooltipLeft,
+            y: margin.top
+          },
+          to: {
+            x: tooltipLeft,
+            y: innerHeight + margin.top
+          },
+          stroke: '#aaa',
+          strokeWidth: 2,
+          pointerEvents: "none",
+          opacity: 0.8
+        })
+      })]
+    }), jsx(Legend$2, {
+      showLegend: options.showLegend,
+      margin: margin
+    }), jsx(Tooltip$2, {
+      showTooltip: tooltipOpen,
+      tooltipData: tooltipData,
+      tooltipLeft: tooltipLeft,
+      tooltipTop: tooltipTop,
+      xKey: xKey,
+      yKey: yKey,
+      theme: themeCSS.popoverMenus
+    })]
+  });
+};
+var Bar$1 = function Bar(_ref4) {
+  var bar = _ref4.bar,
+    barGroup = _ref4.barGroup,
+    yScale = _ref4.yScale,
+    formattedChartDataForBarChart = _ref4.formattedChartDataForBarChart;
+  var step = formattedChartDataForBarChart.steps[barGroup.index];
+  var y = yScale(Math.max(step.start, step.end));
+  var barHeight = Math.abs(yScale(step.start) - yScale(step.end));
+  return jsx(Fragment$1, {
+    children: jsx("rect", {
+      x: bar.x,
+      y: y,
+      width: bar.width,
+      height: barHeight,
+      fill: getBarFill$1(formattedChartDataForBarChart.bars, formattedChartDataForBarChart.conditionalFormattingRules, bar.key, bar.value),
+      rx: 4
+    }, "bar-group-bar-" + barGroup.index + "-" + bar.index + "-" + bar.value + "-" + bar.key)
+  });
+};
+
 function getNiceInterval$2(interval) {
   // Round the interval to a "nice" value (1, 2, 5, etc.)
   var exponent = Math.floor(Math.log10(interval));
@@ -47144,7 +47745,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
             overflowX: 'hidden'
           },
           children: function children(parent) {
-            return jsx(WaterfallChart$4, {
+            return jsx(WaterfallChart$2, {
               width: parent.width,
               height: parent.height,
               options: {
@@ -47169,7 +47770,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
 };
 var WaterfallChartView$1 = /*#__PURE__*/memo(WaterfallChartView, shouldUpdate);
 
-var WaterfallChart$2 = function WaterfallChart(_ref) {
+var WaterfallChart$3 = function WaterfallChart(_ref) {
   var component = _ref.component,
     dataSet = _ref.dataSet,
     dashboardBehaviour = _ref.dashboardBehaviour,
@@ -47666,7 +48267,7 @@ var Component = function Component(props) {
         });
       },
       onError: dashboardBehaviour.onError,
-      children: jsx(WaterfallChart$2, {
+      children: jsx(WaterfallChart$3, {
         id: props.id,
         dataSet: dataSet,
         setLocalFilters: props.setLocalFilters,
@@ -63982,7 +64583,7 @@ var Progress$3 = /*#__PURE__*/function (_View13) {
   };
   return Progress;
 }(View$3);
-var WaterfallChart$3 = /*#__PURE__*/function (_View15) {
+var WaterfallChart$4 = /*#__PURE__*/function (_View15) {
   function WaterfallChart(attributes) {
     return _View15.call(this, _extends({}, attributes, {
       type: 'waterfallChart'
@@ -65911,7 +66512,7 @@ VizzlyServices.HorizontalBarChart = HorizontalBarChart$2;
 VizzlyServices.MercatorMap = MercatorMap$4;
 VizzlyServices.SingleStat = SingleStat$3;
 VizzlyServices.Progress = Progress$3;
-VizzlyServices.WaterfallChart = WaterfallChart$3;
+VizzlyServices.WaterfallChart = WaterfallChart$4;
 // @ts-ignore
 if (typeof window !== 'undefined' && !window.Vizzly) {
   // @ts-ignore
@@ -68737,7 +69338,7 @@ var GlobalProviderContents = function GlobalProviderContents(props) {
   });
 };
 
-var _excluded$g = ["view"];
+var _excluded$h = ["view"];
 var Dashboard$2 = function Dashboard(props) {
   var handleOnError = function handleOnError(error, errorInfo) {
     return (props == null ? void 0 : props.onError) && (props == null ? void 0 : props.onError(error, errorInfo));
@@ -68758,7 +69359,7 @@ var Editor$1 = function Editor(props) {
   var handleOnError = function handleOnError(error, errorInfo) {
     return (props == null ? void 0 : props.onError) && (props == null ? void 0 : props.onError(error, errorInfo));
   };
-  var resetProps = _objectWithoutPropertiesLoose(props, _excluded$g);
+  var resetProps = _objectWithoutPropertiesLoose(props, _excluded$h);
   return jsxs(ErrorBoundary, {
     renderOnError: function renderOnError() {
       return jsx("p", {