@vizzly/dashboard 0.15.0-dev-2951fa8f4bfb19f2edfb461044c09144bcc56296 → 0.15.0-dev-65c3e5d7491389a56cc8409b046f92683dd4725f

package/dist/dashboard.esm.js

@@ -10553,7 +10553,7 @@ var WaterfallChart = function WaterfallChart(config) {
       return removeField$1(attrs, fieldId, config.queryEngineConfig);
     },
     isRunnable: function isRunnable(hydrated) {
-      return hydrated.measure.length > 0;
+      return hydrated.measure.length > 0 && (hydrated.dimension.length > 0 || hydrated.timeDimension !== null);
     },
     autoGenerate: function autoGenerate(dataSet) {
       var _DataSet$buildQueryAt = buildQueryAttributes(dataSet, config.queryEngineConfig, 'waterfallChart'),
@@ -10578,7 +10578,8 @@ var WaterfallChart = function WaterfallChart(config) {
         getValues: function getValues(attrs) {
           return attrs.measure;
         },
-        testId: 'metric-input'
+        testId: 'metric-input',
+        maxAllowed: 1
       }), _extends({}, namespace(CONSTANTS$l, 'field_x_axis'), {
         fieldFilterOptions: {
           forComponent: 'waterfallChart',
@@ -10591,7 +10592,7 @@ var WaterfallChart = function WaterfallChart(config) {
         getValues: function getValues(attrs) {
           return getGroupingWithTimeDimension(attrs);
         },
-        maxAllowed: 2,
+        maxAllowed: 1,
         testId: 'add-dimension'
       }), namespace(CONSTANTS$l, 'sort'), namespace(CONSTANTS$l, 'filter'), namespace(CONSTANTS$l, 'custom_metrics'), namespace(CONSTANTS$l, 'limit')];
     },
@@ -53141,6 +53142,246 @@ var SunburstChart$2 = function SunburstChart(props) {
   });
 };
 
+function getNiceInterval$3(interval) {
+  // Round the interval to a "nice" value (1, 2, 5, etc.)
+  var exponent = Math.floor(Math.log10(interval));
+  var fraction = interval / Math.pow(10, exponent);
+  var niceFraction;
+  if (fraction <= 1.5) niceFraction = 1;else if (fraction <= 3) niceFraction = 2;else if (fraction <= 7) niceFraction = 5;else niceFraction = 10;
+  return niceFraction * Math.pow(10, exponent);
+}
+
+var getYTicks = function getYTicks(_ref) {
+  var yMinValue = _ref.yMinValue,
+    yMaxValue = _ref.yMaxValue,
+    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    formattingFunctionY = _ref.formattingFunctionY;
+  var yTicks = [];
+  var yTickInterval = getNiceInterval$3((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
+  for (var i = 0; i < approxYAxisLabelCount; i++) {
+    var value = (yMinValue + i) * yTickInterval;
+    var formattedValue = formattingFunctionY(value);
+    yTicks.push({
+      value: value,
+      formattedValue: formattedValue,
+      scaleValue: value
+    });
+  }
+  return yTicks;
+};
+
+var getRepresentationData = function getRepresentationData(_ref) {
+  var content = _ref.content,
+    xKey = _ref.xKey,
+    yKey = _ref.yKey,
+    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    showTotalBar = _ref.showTotalBar,
+    formattingFunctionY = _ref.formattingFunctionY;
+  var data = [];
+  var steps = [];
+  var xTicks = [];
+  var yValueSum = 0;
+  var yMinValue = 0;
+  var yMaxValue = 0;
+  content.forEach(function (dataItem, index) {
+    var _dataItem$xValueIndex, _dataItem$xValueIndex2, _dataItem$yValueIndex, _dataItem$yValueIndex2, _data$push;
+    var xValueIndex = 0;
+    var yValueIndex = 1;
+    var xValue = (_dataItem$xValueIndex = dataItem[xValueIndex]) == null ? void 0 : _dataItem$xValueIndex.value;
+    var xFormattedValue = (_dataItem$xValueIndex2 = dataItem[xValueIndex]) == null ? void 0 : _dataItem$xValueIndex2.formattedValue;
+    var yValue = Number((_dataItem$yValueIndex = (_dataItem$yValueIndex2 = dataItem[yValueIndex]) == null ? void 0 : _dataItem$yValueIndex2.value) != null ? _dataItem$yValueIndex : 0);
+    var yValueDiff = yValue;
+    if (index > 0) {
+      var _content$yValueIndex;
+      var prevYValue = Number((_content$yValueIndex = content[index - 1][yValueIndex]) == null ? void 0 : _content$yValueIndex.value);
+      yValueDiff = yValue - prevYValue;
+    }
+    var prevYValueSum = yValueSum;
+    yValueSum += yValueDiff;
+    data.push((_data$push = {}, _data$push[xKey] = {
+      value: xValue,
+      formattedValue: xFormattedValue
+    }, _data$push[yKey] = {
+      value: yValueDiff,
+      formattedValue: formattingFunctionY(yValueDiff)
+    }, _data$push));
+    xTicks.push({
+      value: xValue,
+      formattedValue: xFormattedValue,
+      scaleValue: xValue
+    });
+    steps.push({
+      x: xValue,
+      y: yValue,
+      start: prevYValueSum,
+      end: yValueSum
+    });
+    yMinValue = Math.floor(Math.min(yMinValue, yValue));
+    yMaxValue = Math.ceil(Math.max(yMaxValue, yValue));
+  });
+  if (showTotalBar) {
+    var _data$push2;
+    var totalLabel = 'Total';
+    steps.push({
+      x: totalLabel,
+      y: yValueSum,
+      start: 0,
+      end: yValueSum
+    });
+    data.push((_data$push2 = {}, _data$push2[xKey] = {
+      value: totalLabel,
+      formattedValue: totalLabel
+    }, _data$push2[yKey] = {
+      value: yValueSum,
+      formattedValue: formattingFunctionY(yValueSum)
+    }, _data$push2));
+    xTicks.push({
+      value: totalLabel,
+      formattedValue: totalLabel,
+      scaleValue: totalLabel
+    });
+  }
+  var yTicks = getYTicks({
+    yMinValue: yMinValue,
+    yMaxValue: yMaxValue,
+    approxYAxisLabelCount: approxYAxisLabelCount,
+    formattingFunctionY: formattingFunctionY
+  });
+  return {
+    data: data,
+    steps: steps,
+    xTicks: xTicks,
+    yTicks: yTicks,
+    yMinValue: yMinValue,
+    yMaxValue: yMaxValue
+  };
+};
+
+var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentation(_ref) {
+  var _formattedResult$fiel, _formattedResult$fiel2, _axisTitles$x, _axisTitles$y;
+  var approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    axisTitles = _ref.axisTitles,
+    dateTimeFormatOptions = _ref.dateTimeFormatOptions,
+    defaultFormats = _ref.defaultFormats,
+    nullValue = _ref.nullValue,
+    numberFormatOptions = _ref.numberFormatOptions,
+    pivotConfig = _ref.pivotConfig,
+    result = _ref.result,
+    showTotalBar = _ref.showTotalBar,
+    _valueAlias = _ref.valueAlias,
+    xAxisFormat = _ref.xAxisFormat,
+    xAxisPrefix = _ref.xAxisPrefix,
+    xAxisPostfix = _ref.xAxisPostfix,
+    yAxisFormat = _ref.yAxisFormat,
+    yAxisPrefix = _ref.yAxisPrefix,
+    yAxisPostfix = _ref.yAxisPostfix;
+  var activeDateTimeFormats = {};
+  var _buildFieldFormatMaps = buildFieldFormatMaps(result, pivotConfig, xAxisPrefix, xAxisPostfix, xAxisFormat, yAxisPrefix, yAxisPostfix, yAxisFormat, nullValue, numberFormatOptions),
+    allPrefixes = _buildFieldFormatMaps.allPrefixes,
+    allPostfixes = _buildFieldFormatMaps.allPostfixes,
+    nullValues = _buildFieldFormatMaps.nullValues,
+    activeNumberFormats = _buildFieldFormatMaps.activeNumberFormats;
+  var params = {
+    defaultFormats: defaultFormats,
+    dateTimeFormatOptions: dateTimeFormatOptions,
+    numberFormatOptions: numberFormatOptions,
+    valueAlias: function valueAlias(params) {
+      if (typeof _valueAlias === 'function') {
+        return String(_valueAlias({
+          fieldId: id({
+            field: params.fieldId,
+            "function": params["function"]
+          }),
+          value: params.value
+        }));
+      }
+      return undefined;
+    },
+    nullValue: nullValues,
+    prefixes: allPrefixes,
+    postfixes: allPostfixes,
+    activeNumberFormats: activeNumberFormats,
+    activeDateTimeFormats: activeDateTimeFormats
+  };
+  var formattedResult = formatResult(result, params);
+  var formattingFunctionY = function formattingFunctionY(value) {
+    // Use any y axis field as they are all formatted in the same way (for now...);
+    var nonPivotField = formattedResult.fields.find(function (resultField) {
+      return ![].concat(pivotConfig.x, pivotConfig.y).includes(resultField.id);
+    });
+    if (!nonPivotField) return '';
+    return formattedResult.formatterFunc(value, {
+      fieldId: nonPivotField.fieldId,
+      "function": nonPivotField["function"],
+      outputDataType: nonPivotField.outputDataType
+    }).formattedValue;
+  };
+  var keys = formattedResult.fields.map(function (field) {
+    var _ref2;
+    var key = field.fieldId;
+    var keyFormatted = field.publicName;
+    var dataType = field.dataType;
+    return _ref2 = {}, _ref2[key] = {
+      key: key,
+      keyFormatted: keyFormatted,
+      dataType: dataType
+    }, _ref2;
+  });
+  var xKey = (_formattedResult$fiel = formattedResult.fields[0]) == null ? void 0 : _formattedResult$fiel.fieldId;
+  var yKey = (_formattedResult$fiel2 = formattedResult.fields[1]) == null ? void 0 : _formattedResult$fiel2.fieldId;
+  var content = formattedResult.content;
+  var _getRepresentationDat = getRepresentationData({
+      content: content,
+      xKey: xKey,
+      yKey: yKey,
+      approxYAxisLabelCount: approxYAxisLabelCount,
+      showTotalBar: showTotalBar,
+      formattingFunctionY: formattingFunctionY
+    }),
+    data = _getRepresentationDat.data,
+    steps = _getRepresentationDat.steps,
+    xTicks = _getRepresentationDat.xTicks,
+    yTicks = _getRepresentationDat.yTicks,
+    yMinValue = _getRepresentationDat.yMinValue,
+    yMaxValue = _getRepresentationDat.yMaxValue;
+  var chartRepresentation = {
+    keys: _extends({}, keys[0], keys[1]),
+    x: {
+      title: (_axisTitles$x = axisTitles == null ? void 0 : axisTitles.x) != null ? _axisTitles$x : null,
+      ticks: xTicks,
+      prefix: xAxisPrefix,
+      postfix: xAxisPostfix,
+      key: xKey,
+      scale: {
+        dataType: 'string',
+        key: xKey,
+        ordering: null,
+        min: null,
+        max: null
+      }
+    },
+    y: {
+      title: (_axisTitles$y = axisTitles == null ? void 0 : axisTitles.y) != null ? _axisTitles$y : null,
+      ticks: yTicks,
+      key: yKey,
+      prefix: yAxisPrefix,
+      postfix: yAxisPostfix,
+      scale: {
+        dataType: 'number',
+        key: null,
+        ordering: 'asc',
+        min: yMinValue,
+        max: yMaxValue
+      }
+    },
+    data: data
+  };
+  return {
+    waterfallChartRepresentation: chartRepresentation,
+    waterfallChartSteps: steps
+  };
+};
+
 var ASSUMED_AVERAGE_CHAR_WIDTH$2 = 8.8;
 function calculateWordWidth$1(word, avgCharWidth) {
   if (avgCharWidth === void 0) {
@@ -53242,7 +53483,7 @@ var Tooltip$2 = function Tooltip(_ref) {
   if (!showTooltip || !tooltipData) return null;
   var value = tooltipData[yKey].value;
   var isPositiveValue = Number(value) > 0;
-  return jsx(TooltipWithBounds, {
+  return /*#__PURE__*/createPortal(jsx(TooltipWithBounds, {
     left: tooltipLeft,
     top: tooltipTop,
     style: theme,
@@ -53277,7 +53518,7 @@ var Tooltip$2 = function Tooltip(_ref) {
         })]
       })]
     })
-  }, Math.random());
+  }, Math.random()), document.body);
 };
 var IconNarrowRight$1 = function IconNarrowRight() {
   var style = {
@@ -53285,7 +53526,7 @@ var IconNarrowRight$1 = function IconNarrowRight() {
     height: 20,
     display: 'block'
   };
-  var fill = "#12B76A";
+  var fill = '#12B76A';
   return jsx("svg", {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -53305,7 +53546,7 @@ var IconTrendingDown$1 = function IconTrendingDown() {
     height: 20,
     display: 'block'
   };
-  var fill = "#F04438";
+  var fill = '#F04438';
   return jsx("svg", {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -53473,8 +53714,8 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     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;
+    var _String;
+    return (_String = String(tick.scaleValue)) != null ? _String : '';
   }) : undefined;
   var handleMouseMove = useCallback(function (event) {
     if (!xKey || !xScaleKey || xScale === null) return;
@@ -53507,7 +53748,7 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
       tick = matchingTickValue || null;
     } else {
       var _matchingTickValue = formattedChartDataForBarChart.x.ticks.find(function (tickValue) {
-        return tickValue.scaleValue === value;
+        return String(tickValue.scaleValue) === value;
       });
       tick = _matchingTickValue || null;
     }
@@ -53532,10 +53773,10 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     return '';
   }, [formattedChartDataForBarChart.y.ticks]);
   var getBarGroupPosition = useCallback(function (d) {
-    if (xScaleKey == null || d == null) return;
+    if (xScaleKey == null || d == null) return '';
     var xValue = d[xScaleKey];
-    if (xScaleDataType === 'string') return xValue;
-    return;
+    if (xScaleDataType === 'string') return String(xValue);
+    return '';
   }, [xScaleKey, xScaleDataType]);
   if (width === 0 || height === 0 || xScale == null) return null;
   return jsxs(Fragment$1, {
@@ -53685,245 +53926,6 @@ var Bar$2 = function Bar(_ref4) {
   });
 };
 
-function getNiceInterval$3(interval) {
-  // Round the interval to a "nice" value (1, 2, 5, etc.)
-  var exponent = Math.floor(Math.log10(interval));
-  var fraction = interval / Math.pow(10, exponent);
-  var niceFraction;
-  if (fraction <= 1.5) niceFraction = 1;else if (fraction <= 3) niceFraction = 2;else if (fraction <= 7) niceFraction = 5;else niceFraction = 10;
-  return niceFraction * Math.pow(10, exponent);
-}
-
-var getYTicks = function getYTicks(_ref) {
-  var yMinValue = _ref.yMinValue,
-    yMaxValue = _ref.yMaxValue,
-    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
-    formattingFunctionY = _ref.formattingFunctionY;
-  var yTicks = [];
-  var yTickInterval = getNiceInterval$3((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
-  for (var i = 0; i < approxYAxisLabelCount; i++) {
-    var value = (yMinValue + i) * yTickInterval;
-    var formattedValue = formattingFunctionY(value);
-    yTicks.push({
-      value: value,
-      formattedValue: formattedValue,
-      scaleValue: value
-    });
-  }
-  return yTicks;
-};
-
-var getRepresentationData = function getRepresentationData(_ref) {
-  var content = _ref.content,
-    xKey = _ref.xKey,
-    yKey = _ref.yKey,
-    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
-    showTotalBar = _ref.showTotalBar,
-    formattingFunctionY = _ref.formattingFunctionY;
-  var data = [];
-  var steps = [];
-  var xTicks = [];
-  var yValueSum = 0;
-  var yMinValue = 0;
-  var yMaxValue = 0;
-  content.forEach(function (dataItem, index) {
-    var _data$push;
-    var xValueIndex = 0;
-    var yValueIndex = 1;
-    var xValue = dataItem[xValueIndex].value;
-    var xFormattedValue = dataItem[xValueIndex].formattedValue;
-    var yValue = Number(dataItem[yValueIndex].value);
-    var yValueDiff = yValue;
-    if (index > 0) {
-      var prevYValue = Number(content[index - 1][yValueIndex].value);
-      yValueDiff = yValue - prevYValue;
-    }
-    var prevYValueSum = yValueSum;
-    yValueSum += yValueDiff;
-    data.push((_data$push = {}, _data$push[xKey] = {
-      value: xValue,
-      formattedValue: xFormattedValue
-    }, _data$push[yKey] = {
-      value: yValueDiff,
-      formattedValue: formattingFunctionY(yValueDiff)
-    }, _data$push));
-    xTicks.push({
-      value: xValue,
-      formattedValue: xFormattedValue,
-      scaleValue: xValue
-    });
-    steps.push({
-      x: xValue,
-      y: yValue,
-      start: prevYValueSum,
-      end: yValueSum
-    });
-    yMinValue = Math.floor(Math.min(yMinValue, yValue));
-    yMaxValue = Math.ceil(Math.max(yMaxValue, yValue));
-  });
-  if (showTotalBar) {
-    var _data$push2;
-    var totalLabel = 'Total';
-    steps.push({
-      x: totalLabel,
-      y: yValueSum,
-      start: 0,
-      end: yValueSum
-    });
-    data.push((_data$push2 = {}, _data$push2[xKey] = {
-      value: totalLabel,
-      formattedValue: totalLabel
-    }, _data$push2[yKey] = {
-      value: yValueSum,
-      formattedValue: formattingFunctionY(yValueSum)
-    }, _data$push2));
-    xTicks.push({
-      value: totalLabel,
-      formattedValue: totalLabel,
-      scaleValue: totalLabel
-    });
-  }
-  var yTicks = getYTicks({
-    yMinValue: yMinValue,
-    yMaxValue: yMaxValue,
-    approxYAxisLabelCount: approxYAxisLabelCount,
-    formattingFunctionY: formattingFunctionY
-  });
-  return {
-    data: data,
-    steps: steps,
-    xTicks: xTicks,
-    yTicks: yTicks,
-    yMinValue: yMinValue,
-    yMaxValue: yMaxValue
-  };
-};
-
-var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentation(_ref) {
-  var _formattedResult$fiel, _formattedResult$fiel2, _axisTitles$x, _axisTitles$y;
-  var approxYAxisLabelCount = _ref.approxYAxisLabelCount,
-    axisTitles = _ref.axisTitles,
-    dateTimeFormatOptions = _ref.dateTimeFormatOptions,
-    defaultFormats = _ref.defaultFormats,
-    nullValue = _ref.nullValue,
-    numberFormatOptions = _ref.numberFormatOptions,
-    pivotConfig = _ref.pivotConfig,
-    result = _ref.result,
-    showTotalBar = _ref.showTotalBar,
-    _valueAlias = _ref.valueAlias,
-    xAxisFormat = _ref.xAxisFormat,
-    xAxisPrefix = _ref.xAxisPrefix,
-    xAxisPostfix = _ref.xAxisPostfix,
-    yAxisFormat = _ref.yAxisFormat,
-    yAxisPrefix = _ref.yAxisPrefix,
-    yAxisPostfix = _ref.yAxisPostfix;
-  var activeDateTimeFormats = {};
-  var _buildFieldFormatMaps = buildFieldFormatMaps(result, pivotConfig, xAxisPrefix, xAxisPostfix, xAxisFormat, yAxisPrefix, yAxisPostfix, yAxisFormat, nullValue, numberFormatOptions),
-    allPrefixes = _buildFieldFormatMaps.allPrefixes,
-    allPostfixes = _buildFieldFormatMaps.allPostfixes,
-    nullValues = _buildFieldFormatMaps.nullValues,
-    activeNumberFormats = _buildFieldFormatMaps.activeNumberFormats;
-  var params = {
-    defaultFormats: defaultFormats,
-    dateTimeFormatOptions: dateTimeFormatOptions,
-    numberFormatOptions: numberFormatOptions,
-    valueAlias: function valueAlias(params) {
-      if (typeof _valueAlias === 'function') {
-        return String(_valueAlias({
-          fieldId: id({
-            field: params.fieldId,
-            "function": params["function"]
-          }),
-          value: params.value
-        }));
-      }
-      return undefined;
-    },
-    nullValue: nullValues,
-    prefixes: allPrefixes,
-    postfixes: allPostfixes,
-    activeNumberFormats: activeNumberFormats,
-    activeDateTimeFormats: activeDateTimeFormats
-  };
-  var formattedResult = formatResult(result, params);
-  var formattingFunctionY = function formattingFunctionY(value) {
-    // Use any y axis field as they are all formatted in the same way (for now...);
-    var nonPivotField = formattedResult.fields.find(function (resultField) {
-      return ![].concat(pivotConfig.x, pivotConfig.y).includes(resultField.id);
-    });
-    if (!nonPivotField) return '';
-    return formattedResult.formatterFunc(value, {
-      fieldId: nonPivotField.fieldId,
-      "function": nonPivotField["function"],
-      outputDataType: nonPivotField.outputDataType
-    }).formattedValue;
-  };
-  var keys = formattedResult.fields.map(function (field) {
-    var _ref2;
-    var key = field.fieldId;
-    var keyFormatted = field.publicName;
-    var dataType = field.dataType;
-    return _ref2 = {}, _ref2[key] = {
-      key: key,
-      keyFormatted: keyFormatted,
-      dataType: dataType
-    }, _ref2;
-  });
-  var xKey = (_formattedResult$fiel = formattedResult.fields[0]) == null ? void 0 : _formattedResult$fiel.fieldId;
-  var yKey = (_formattedResult$fiel2 = formattedResult.fields[1]) == null ? void 0 : _formattedResult$fiel2.fieldId;
-  var content = formattedResult.content;
-  var _getRepresentationDat = getRepresentationData({
-      content: content,
-      xKey: xKey,
-      yKey: yKey,
-      approxYAxisLabelCount: approxYAxisLabelCount,
-      showTotalBar: showTotalBar,
-      formattingFunctionY: formattingFunctionY
-    }),
-    data = _getRepresentationDat.data,
-    steps = _getRepresentationDat.steps,
-    xTicks = _getRepresentationDat.xTicks,
-    yTicks = _getRepresentationDat.yTicks,
-    yMinValue = _getRepresentationDat.yMinValue,
-    yMaxValue = _getRepresentationDat.yMaxValue;
-  var chartRepresentation = {
-    keys: _extends({}, keys[0], keys[1]),
-    x: {
-      title: (_axisTitles$x = axisTitles == null ? void 0 : axisTitles.x) != null ? _axisTitles$x : null,
-      ticks: xTicks,
-      prefix: xAxisPrefix,
-      postfix: xAxisPostfix,
-      key: xKey,
-      scale: {
-        dataType: 'string',
-        key: xKey,
-        ordering: null,
-        min: null,
-        max: null
-      }
-    },
-    y: {
-      title: (_axisTitles$y = axisTitles == null ? void 0 : axisTitles.y) != null ? _axisTitles$y : null,
-      ticks: yTicks,
-      key: yKey,
-      prefix: yAxisPrefix,
-      postfix: yAxisPostfix,
-      scale: {
-        dataType: 'number',
-        key: null,
-        ordering: 'asc',
-        min: yMinValue,
-        max: yMaxValue
-      }
-    },
-    data: data
-  };
-  return {
-    waterfallChartRepresentation: chartRepresentation,
-    waterfallChartSteps: steps
-  };
-};
-
 var WaterfallChartView = function WaterfallChartView(props) {
   var approxXAxisLabelCount = props.approxXAxisLabelCount,
     approxYAxisLabelCount = props.approxYAxisLabelCount,
@@ -53991,6 +53993,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
     title: "Missing parameters"
   });
   if (isLoading(result)) return jsx(LoadingComponent, {});
+  if (isLoadingResult(result)) return jsx(LoadingComponent, {});
   if (hasFailed(result)) return jsx(FailedToLoadDataNotice, {});
   if (isEmpty(result)) return jsx(NoResultContentToShowNotice, _extends({}, headerProps));
   var showHeadline = headlineAvailable(order, headline, timeDimension);
@@ -54061,6 +54064,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
     })
   });
 };
+function isLoadingResult(result) {
+  return result != null && result.content[0].length ? (result == null ? void 0 : result.content[0].length) < 2 : false;
+}
 var WaterfallChartView$1 = /*#__PURE__*/memo(WaterfallChartView, shouldUpdate);
 
 var WaterfallChart$3 = function WaterfallChart(_ref) {

package/dist/shared-ui/src/components/WaterfallChart/WaterfallChartView.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { VizzlyComponents } from '../../types';
+/// <reference types="react" />
 import { Component } from '../../../../shared-logic/src/Component/types';
+import { VizzlyComponents } from '../../types';
 export declare type WaterfallChartViewProps = VizzlyComponents.ViewProps<Component.WaterfallChartAttributes>;
-declare const _default: React.NamedExoticComponent<VizzlyComponents.ViewProps<Component.WaterfallChartAttributes, import("../../../../shared-logic/src/Component/types").Component.Attributes>>;
+declare const _default: import("react").NamedExoticComponent<VizzlyComponents.ViewProps<Component.WaterfallChartAttributes, import("../../../../shared-logic/src/Component/types").Component.Attributes>>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.15.0-dev-2951fa8f4bfb19f2edfb461044c09144bcc56296",
+  "version": "0.15.0-dev-65c3e5d7491389a56cc8409b046f92683dd4725f",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",